/* ==========================================================================
   Cúpla Score: design tokens
   Loaded first (tokens.css, base.css, map.css, games.css, screens.css).
   Theme: light by default. Dark comes from prefers-color-scheme or
   html[data-theme="dark"]; html[data-theme="light"] forces light.
   data-theme always wins over the system setting.
   Motion: prefers-reduced-motion or html[data-motion="reduce"] zeroes the
   duration tokens (base.css also disables keyframe animations).
   Colour pairs are checked by assets-src/logo/contrast.py (see docs/decisions/brand.md).
   Keep that file's PALETTE in sync when changing colours here.
   ========================================================================== */

/* ---- Fonts (self-hosted, OFL; files in the theme so WP and the game share them) ---- */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(../../wp-content/themes/cuplascore/assets/fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../../wp-content/themes/cuplascore/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../../wp-content/themes/cuplascore/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");
}

/* Metric-matched local fallbacks (Arial) so the swap does not shift layout.
   Values computed from the TTFs: size-adjust = average advance width (English
   letter frequency) vs Arial; overrides = hhea metrics / size-adjust. */
@font-face {
  font-family: "Bricolage Grotesque Fallback";
  font-style: normal;
  font-weight: 200 800;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  size-adjust: 102.27%;
  ascent-override: 90.94%;
  descent-override: 26.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Atkinson Hyperlegible Fallback";
  font-style: normal;
  font-weight: 400;
  src: local("Arial"), local("ArialMT");
  size-adjust: 99.89%;
  ascent-override: 95.11%;
  descent-override: 29.03%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Atkinson Hyperlegible Fallback";
  font-style: normal;
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 100.58%;
  ascent-override: 94.45%;
  descent-override: 28.83%;
  line-gap-override: 0%;
}

/* ---- Light theme (default) ---- */
:root {
  color-scheme: light;

  /* Brand (spec 10.2) */
  --sea-mist: #E9EFEC;      /* page background */
  --surface: #FFFFFF;       /* cards, sheets, tiles */
  --slate: #1D2B2F;         /* text */
  --atlantic: #0D5C55;      /* primary actions, correct, Laighin tint */
  --gorse: #F3B120;         /* fada, score, stars. Graphics only, never text on light */
  --heather: #7E4F93;       /* boss nodes, titles, Connachta tint */
  --rowan: #C2412D;         /* wrong state, errors (fills, icons) */

  /* Derived text colours (all AA on --sea-mist, --surface and their -soft tint) */
  --text: var(--slate);
  --muted: #4F6166;         /* secondary text */
  --atlantic-ink: #0D5C55;  /* atlantic used as text / links */
  --heather-ink: #7E4F93;   /* titles in Irish */
  --rowan-ink: #A8361F;     /* error and "wrong" text */

  /* Text on solid fills */
  --on-atlantic: #FFFFFF;
  --on-heather: #FFFFFF;
  --on-rowan: #FFFFFF;
  --on-gorse: #1D2B2F;

  /* Soft state backgrounds */
  --atlantic-soft: #DCEEEA;
  --rowan-soft: #FBE6E1;
  --gorse-soft: #FDF0D2;
  --heather-soft: #F0E7F4;

  /* Darker bottom edges for tactile tiles and buttons (2 px, instead of shadows) */
  --tile-edge: #B9C8C3;
  --atlantic-edge: #07403B;
  --rowan-edge: #8E2E1F;
  --heather-edge: #5E3870;
  --gorse-edge: #8F6200;    /* also the 3:1 outline that keeps stars visible on white */

  /* Lines and map */
  --line: #C5D2CE;          /* hairlines, empty tracks (decorative) */
  --line-strong: #6B7F82;   /* input and secondary button borders (3:1) */
  --land: #FFFFFF;          /* map island fill */
  --coast: #9DB0AC;         /* map coastline stroke */
  --route: #6B7F82;         /* dotted route */
  --backdrop: rgba(15, 26, 28, 0.45);
  --focus: var(--atlantic);

  /* Province tints (spec: 18 % over --land). Use with fill-opacity: var(--tint-alpha) */
  --tint-laighin: var(--atlantic);
  --tint-mumhain: var(--gorse);
  --tint-connachta: var(--heather);
  --tint-ulaidh: var(--slate);
  --tint-alpha: 0.18;

  /* ---- Typography ---- */
  --font-display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Atkinson Hyperlegible Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Scale: base 16 px, ratio 1.25 */
  --step--1: 0.8rem;        /* 12.8 */
  --step-0: 1rem;           /* 16 */
  --step-1: 1.25rem;        /* 20 */
  --step-2: 1.5625rem;      /* 25 */
  --step-3: 1.953rem;       /* 31.25 */
  --step-4: 2.441rem;       /* 39 */
  --step-5: 3.052rem;       /* 48.8 */
  --score-size: 6rem;       /* 96, 128 on desktop (below) */

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-body: 1.5;
  --measure: 65ch;          /* max line length on text pages */

  --weight-regular: 400;
  --weight-bold: 700;
  --weight-display: 750;    /* headlines */
  --weight-heavy: 800;      /* score numeral, logo weight */
  --stretch-display: 90%;   /* headlines: slightly narrow */
  --stretch-score: 100%;    /* score numeral: widest the font goes */

  /* ---- Spacing (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --gutter: var(--space-4);

  /* ---- Radii ---- */
  --radius-sheet: 20px;
  --radius-tile: 12px;
  --radius-pill: 999px;
  --radius-small: 8px;

  /* ---- Sizes ---- */
  --tap: 48px;              /* minimum touch target */
  --edge: 2px;              /* tile bottom edge */
  --content-max: 40rem;     /* game column */
  --left-col-max: 32rem;    /* landing desktop left column */

  /* ---- Focus ---- */
  --focus-width: 3px;
  --focus-offset: 2px;

  /* ---- Motion ---- */
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
  --dur-route: 1800ms;      /* landing route draw (the one orchestrated moment) */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Layering ---- */
  --z-header: 10;
  --z-sheet: 50;
  --z-toast: 60;
}

@media (min-width: 48rem) {
  :root {
    --score-size: 8rem;     /* 128 */
    --gutter: var(--space-5);
  }
}

/* ---- Dark theme: system preference (unless forced light) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sea-mist: #0F1A1C;
    --surface: #172629;
    --slate: #E6EEEB;
    --atlantic: #3FA595;
    --gorse: #F6C14B;
    --heather: #B58AC8;
    --rowan: #E2694F;
    --muted: #A3B4B1;
    --atlantic-ink: #5CC0AF;
    --heather-ink: #C9A6D8;
    --rowan-ink: #F08A73;
    --on-atlantic: #0F1A1C;
    --on-heather: #0F1A1C;
    --on-rowan: #0F1A1C;
    --on-gorse: #0F1A1C;
    --atlantic-soft: #163A36;
    --rowan-soft: #3B211C;
    --gorse-soft: #3A3017;
    --heather-soft: #2E2236;
    --tile-edge: #0B1416;
    --atlantic-edge: #24685D;
    --rowan-edge: #9C4231;
    --heather-edge: #7D5A8D;
    --gorse-edge: #F6C14B;
    --line: #2E4448;
    --line-strong: #6F8784;
    --land: #1E3236;
    --coast: #3E5A5E;
    --route: #8FA3A0;
    --backdrop: rgba(0, 0, 0, 0.6);
  }
}

/* ---- Dark theme: manual override (wins over the system) ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --sea-mist: #0F1A1C;
  --surface: #172629;
  --slate: #E6EEEB;
  --atlantic: #3FA595;
  --gorse: #F6C14B;
  --heather: #B58AC8;
  --rowan: #E2694F;
  --muted: #A3B4B1;
  --atlantic-ink: #5CC0AF;
  --heather-ink: #C9A6D8;
  --rowan-ink: #F08A73;
  --on-atlantic: #0F1A1C;
  --on-heather: #0F1A1C;
  --on-rowan: #0F1A1C;
  --on-gorse: #0F1A1C;
  --atlantic-soft: #163A36;
  --rowan-soft: #3B211C;
  --gorse-soft: #3A3017;
  --heather-soft: #2E2236;
  --tile-edge: #0B1416;
  --atlantic-edge: #24685D;
  --rowan-edge: #9C4231;
  --heather-edge: #7D5A8D;
  --gorse-edge: #F6C14B;
  --line: #2E4448;
  --line-strong: #6F8784;
  --land: #1E3236;
  --coast: #3E5A5E;
  --route: #8FA3A0;
  --backdrop: rgba(0, 0, 0, 0.6);
}

/* ---- Reduced motion: system preference or html[data-motion="reduce"] ---- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0.01ms;
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
    --dur-route: 0.01ms;
  }
}
:root[data-motion="reduce"] {
  --dur-instant: 0.01ms;
  --dur-fast: 0.01ms;
  --dur-base: 0.01ms;
  --dur-slow: 0.01ms;
  --dur-route: 0.01ms;
}