/* The Fourth & Fate brand tokens (prompt050, brand-identity.md). This file is the token block: the only place in the */
/* game's stylesheets where a color is written as a value. Every other rule names a token. The values come from the  */
/* owner's kit (brand-kit/fourth-and-fate-design-tokens.json); a token the kit does not set is derived from its six   */
/* colors and recorded in DEC-241. The portal's tester pages load this same file (DEC-243).                            */

/* Both fonts are self-hosted under the SIL Open Font License (the license files sit beside them). swap: a slow first */
/* load shows the system stack, never invisible text.                                                                  */
@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/bebas-neue-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Dark is the primary expression (guide §6). */
:root {
  color-scheme: dark;
  --font-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius-small: 6px;
  --radius-medium: 10px;
  --radius-large: 14px;

  /* The kit's nineteen names. */
  --background-primary: #0F3D2E;
  --background-secondary: #1A1A1A;
  --surface-primary: #173F33;
  --surface-elevated: #232323;
  --text-primary: #F4F1E8;
  --text-secondary: rgba(244,241,232,0.78);
  --text-muted: rgba(244,241,232,0.72);
  --action-primary: #F4F1E8;
  --action-critical: #E4572E;
  --action-disabled: rgba(244,241,232,0.6);
  --state-success: #F2C94C;
  --state-warning: #F5A86B;
  --state-danger: #FF8E70;
  --play-offense: #F4F1E8;
  --play-defense: #A9B4C6;
  --play-route: #F4F1E8;
  --play-ball: #F2C94C;
  --border-subtle: rgba(244,241,232,0.18);
  --border-strong: rgba(244,241,232,0.5);

  /* What a screen needs that the kit leaves unnamed (DEC-241). */
  --on-action-primary: #0F3D2E;
  --on-action-critical: #1A1A1A;
  --text-accent: #F2C94C;
  --action-link: #F2C94C;
  --state-info: #A9B4C6;
  --focus-ring: #F2C94C;
  --control-background: #1F4A3C;
  --control-hover: #275646;
  --control-selected: #245142;
  --tint-success: #2E3A1C;
  --tint-warning: #3D3020;
  --tint-info: #22303A;
  --tint-danger: #4A2219;
  --on-state-danger: #1A1A1A;
  --background-glow: #1C5640;
  --header-scrim: rgba(26,26,26,0.96);
  --header-text: #F4F1E8;
  --header-muted: rgba(244,241,232,0.78);
  --header-accent: #F2C94C;
  --mark-ampersand: #E4572E;
  --action-primary-hover: #E6E1D3;
  --shadow: rgba(0,0,0,0.3);
  --code-background: #12141A;

  /* The chalkboard and the field strip are Field Green with chalk in both themes (DEC-244). */
  --board: #0F3D2E;
  --board-edge: rgba(244,241,232,0.5);
  --board-line: rgba(244,241,232,0.16);
  --board-endzone: rgba(242,201,76,0.28);
  --board-halo: rgba(15,61,46,0.9);
  --play-key: #F2C94C;
  --play-ink: #1A1A1A;

  /* The scouting card's frames and stamps (prompt055, DEC-273): the Starter's chalk, the top grades' First Down Gold, */
  /* the Blue-Chip stamp in Decision Red with ink on it, the ALREADY YOURS band, and the one light sweep.               */
  --frame-chalk: rgba(244,241,232,0.86);
  --frame-gold: #F2C94C;
  --stamp-red: #E4572E;
  --stamp-ink: #1A1A1A;
  --stamp-chalk: #F4F1E8;
  --sweep: rgba(244,241,232,0.42);
}

/* Light follows the device and keeps the identity rather than inverting it (guide §6): Chalk White underneath, Field */
/* Green for text, headers, and the primary control, Slate for secondary text, and the kit's darker derivatives where */
/* Decision Red and First Down Gold would fail on a light ground.                                                       */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --background-primary: #F4F1E8;
    --background-secondary: #FFFFFF;
    --surface-primary: #FFFFFF;
    --surface-elevated: #F8F7F2;
    --text-primary: #0F3D2E;
    --text-secondary: #5B667A;
    --text-muted: #5B667A;
    --action-primary: #0F3D2E;
    --action-critical: #C94324;
    --action-disabled: #5B667A;
    --state-success: #8A6500;
    --state-warning: #9A4A00;
    --state-danger: #B03A1E;
    --border-subtle: #CDD2D8;
    --border-strong: #5B667A;

    --on-action-primary: #F4F1E8;
    --on-action-critical: #FFFFFF;
    --text-accent: #8A6500;
    --action-link: #0F3D2E;
    --state-info: #5B667A;
    --focus-ring: #8A6500;
    --control-background: #FFFFFF;
    --control-hover: #EDEFE7;
    --control-selected: #EAF0EB;
    --tint-success: #F6EDD0;
    --tint-warning: #FBEBDD;
    --tint-info: #EAEEF4;
    --tint-danger: #FBE4DD;
    --on-state-danger: #FFFFFF;
    --background-glow: #FFFFFF;
    --header-scrim: rgba(15,61,46,0.97);
    --board-edge: #0F3D2E;
    --action-primary-hover: #1C5640;
    --shadow: rgba(15,61,46,0.14);
    --code-background: #EEF0EA;

    /* On Chalk White the chalk frame is Slate and the gold a darker ochre, so each passes 3:1 as a graphic (DEC-273). */
    --frame-chalk: #5B667A;
    --frame-gold: #8A6500;
    --sweep: rgba(255,255,255,0.5);
  }
}