/* EdgeRift — design tokens (concept/DESIGN-BRIEF.md §2, §2.10)
   1 of 3 shared stylesheets: tokens.css → base.css → components.css, then the page's own pages/*.css.
   The only file with colour literals. Safari 15.4 floor: hex/rgba, no color-mix(), no light-dark(),
   no nesting, no container queries. */

@layer reset, tokens, base, layout, components, pages, utilities;

/* Webfonts: self-hosted Latin subsets (licences in ../fonts/OFL-*.txt). Rajdhani 700 is preloaded
   by layouts/base.twig. */
@font-face {
  font-family: Rajdhani;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/rajdhani-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Rajdhani;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/rajdhani-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/roboto-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks (measured): no reflow when the webfonts swap in. */
@font-face {
  font-family: "Rajdhani FB Apple";
  src: local("AvenirNextCondensed-DemiBold"), local("Avenir Next Condensed Demi Bold");
  font-weight: 600 700;
  size-adjust: 108.6%; ascent-override: 85.6%; descent-override: 32.2%; line-gap-override: 0%;
}
@font-face {
  font-family: "Rajdhani FB Win";
  src: local("Arial Narrow Bold"), local("ArialNarrow-Bold");
  font-weight: 600 700;
  size-adjust: 104%; ascent-override: 89.4%; descent-override: 33.6%; line-gap-override: 0%;
}
@font-face {
  font-family: "Roboto Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue");
  size-adjust: 99.1%; ascent-override: 93.8%; descent-override: 24.2%; line-gap-override: 0%;
}

@layer tokens {
  :root {
    color-scheme: light;

    /* Colour (§2.4) */
    --c-bg: #FFFFFF;
    --c-band: #F5F5F7;
    --c-ink: #1D1D1F;
    --c-muted: #6E6E73;            /* 5.07 on white · 4.66 on band */
    --c-link-quiet: #424245;       /* footer links */
    --c-hairline: #D2D2D7;         /* decorative rules only */
    --c-positive: #1F9D55;         /* a small check for a plus (compare table ticks) */
    --c-field-border: #86868B;     /* light search field outline (3.6:1) */
    --c-surface-dark: #1D1D1F;     /* dark bands and tiles (the themes band, the Pro tile) */
    --c-on-dark: #F5F5F7;
    --c-on-dark-muted: #A1A1A6;    /* 6.5:1 on ink */
    --c-on-midnight-muted: #C8C8D0;
    --c-on-midnight-soft: #9494A8;  /* the soft half of a two-tone heading on midnight ("SUPPORT & HELP"); 4.7:1+ on the band */
    --c-on-midnight: #FFFFFF;      /* breadcrumb current page + link hover */
    --c-red: #DE2F2F;              /* primary button fill · focus ring · logo */
    --c-red-text: #C42828;         /* CTA + prose links, footer manifesto */
    --c-red-on-dark: #FF5A52;      /* CTA links + focus ring on dark */
    --c-red-on-midnight: #FF8A80;  /* CTA links on --grad-midnight (≥ 5.0:1 at every stop) */
    --c-red-press: #C42828;        /* primary button hover (white label 5.7:1) */
    --c-on-red: #FFFFFF;
    --c-device: #1D1D1F;           /* frame on light: bottom of the gradient */
    --c-device-top: #2C2C2E;       /* frame on light: top of the gradient */
    --c-device-dark: #3A3A3C;      /* frame on dark tiles/bands (lifts off #1D1D1F) */
    --c-device-edge: rgba(255, 255, 255, .06);
    --c-device-edge-dark: rgba(255, 255, 255, .12);
    /* iPad Pro (M5) and iPhone 18 Pro on the home page (owner, 2026-10-13): black glass, aluminium edge (black on light,
       silver on dark) */
    --c-pro-glass: #0A0A0B;
    --c-pro-alu: #2E2E31;
    --c-pro-alu-hi: #75757B;
    --c-pro-silver: #B4B4BA;
    --c-pro-silver-hi: #F2F2F5;
    --c-pro-camera: #1B1B20;
    --c-pro-camera-ring: #2C2C33;
    --c-sep: #AEAEB2;              /* decorative slashes in eyebrows + local-nav crumb (aria-hidden) */
    --c-scrim: rgba(29, 29, 31, .32);  /* dialog backdrop */
    --c-row-active: #F5F5F7;       /* hover / selected rows: menus, search results */
    --c-menu: #FFFFFF;             /* dropdown panels, search dialog, mobile local-nav menu */
    --c-skip-bg: #1D1D1F;
    --c-skip-ink: #F5F5F7;
    --grad-midnight: linear-gradient(135deg, #1A1A2E 0%, #16213E 50%, #0F3460 100%);
    --c-midnight: #16213E;         /* breadcrumb bar; solid stand-in for print / forced colours */

    /* Theme swatches (picker dots only) */
    --swatch-halloween: #2B2820;
    --swatch-christmas: #193D60;
    --swatch-easter: #8CCCEC;
    --swatch-st-patricks: #3EA734;
    --swatch-pool-party: #22D3CB;
    --swatch-valentines: #3D2963;
    --swatch-summer-flowers: #9CA677;
    --swatch-ring: #A1A1A6;

    /* Stages and CSS-drawn objects (Home tiles, Games bands, the TV page) */
    --c-tvos-stage-center: #FFFFFF;      /* tvOS light-grey spotlight; the edge keeps --c-muted at 4.5:1 */
    --c-tvos-stage-mid: #F6F6F9;
    --c-tvos-stage-edge: #F2F2F5;
    --glow-stage-dark: rgb(255 255 255 / .075);   /* the soft spotlight on a dark stage (Pro's Support page hero) */
    --c-night: #0A0E24;                  /* Real Solitaire Retro night stage */
    --c-night-deep: #0B0B0F;
    --c-night-dusk: rgb(42 22 80 / .6);
    --c-on-night-sub: #D2D2D7;
    /* Home feature tiles tinted to their screens (owner, 2026-10-13, concept 1 "Day into night",
       proposal/home-art): the Pro tile a night sky round the Night theme, the iPhone tile a sunset cream round
       Province. On the night tile white type is 14.4:1 or more and red-on-dark 4.7:1 or more; on the cream ink is
       14.2:1 and red-text 4.8:1 (--c-muted would be 4.3:1, so no muted type on it). */
    --c-tile-night-glow: #2A2350;
    --c-tile-night: #12121F;
    --c-tile-night-edge: #0C0C14;
    --c-tile-sunset-top: #FBF6EF;
    --c-tile-sunset-bottom: #F6EADB;
    --filter-neon-icons: drop-shadow(0 0 18px rgb(56 228 224 / .35)) drop-shadow(0 0 3px rgb(229 63 180 / .7));
    --filter-icon-lift: drop-shadow(0 18px 28px rgb(0 0 0 / .16)) drop-shadow(0 3px 6px rgb(0 0 0 / .10));   /* a discontinued app's original icon: a shadow that follows its own baked corners (owner, 2026-10-13) */
    --filter-neon-machine: drop-shadow(0 0 22px rgb(56 228 224 / .28)) drop-shadow(0 0 3px rgb(229 63 180 / .6));
    --c-edition-dos: #F6BA2C;            /* Retro edition colours (as retro.css --r-*) */
    --c-edition-win31: #FF6BF0;
    --c-edition-win95: #38E4E0;
    --c-edition-mac: #62F08E;
    --c-tv-black: #000000;               /* flat-panel TV: screen, bezel, stand */
    --c-tv-bezel-top: #2A2A2D;
    --c-tv-bezel-bottom: #0D0D0F;
    --c-tv-ring: #3A3A3E;
    --c-tv-stand: #2C2C2F;
    --c-tv-stand-light: #4A4A4F;
    --c-tv-base-top: #48484D;
    --c-tv-base-bottom: #1F1F22;
    --c-tv-panel-top: #1E1E20;           /* TV page set */
    --c-tv-panel: #0B0B0C;
    --c-tv-panel-ring: #2F2F32;
    --c-tv-panel-lip: #18181A;
    --c-tv-led: #E8E8E8;
    --c-tv-foot: #2A2A2D;
    --c-tv-foot-light: #4A4A4E;
    --c-tv-shelf-dark: #5A5A5E;
    --c-walnut-top: #C99A6B;             /* media console */
    --c-walnut-top-shade: #A8774A;
    --c-walnut-slat: #8A5A33;
    --c-walnut-gap: #7A4D2A;
    --c-walnut-slat-light: #93623A;
    --c-walnut-leg: #5B3A1F;
    --c-walnut-leg-light: #7A4F2C;
    --c-box-top: #2C2C2E;                /* streaming box */
    --c-box-bottom: #0F0F10;
    --c-remote: #B9B9BE;                 /* silver remote */
    --c-remote-light: #E6E6EA;
    --c-remote-shade: #A9A9AE;
    --c-seg-track: #E8E8ED;              /* TV controls: segmented control track (the thumb is --c-bg) */
    --c-ctl-lead: #8E8E93;               /* callout leader lines: 3.3:1 on white, ~4:1 on the dark gamepad */
    --shadow-seg: 0 1px 2px rgba(0, 0, 0, .1), 0 2px 8px -2px rgba(0, 0, 0, .12);
    --c-map-paper: #F3F3F3;              /* Company contact map frame */

    /* Shadows: devices, flyout, dialog only */
    --shadow-device: 0 30px 60px -24px rgba(0, 0, 0, .22);
    --shadow-phone: 0 20px 40px -12px rgba(0, 0, 0, .35);   /* hero phone lifts off the tablet */
    --shadow-flyout: 0 24px 48px -24px rgba(0, 0, 0, .18);  /* local-nav drop-down (mobile) */
    --shadow-menu: 0 12px 32px -8px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .05);   /* header dropdown panels */
    --shadow-dialog: 0 24px 64px -12px rgba(0, 0, 0, .28);
    --shadow-tile: 0 1px 2px rgba(0, 0, 0, .04);                 /* Support's white cards on grey (as light as Apple's tiles) */
    --shadow-tile-lift: 0 24px 44px -24px rgba(0, 0, 0, .32);    /* …and lifted on hover */
    --shadow-icon-dark: 0 30px 60px -22px rgba(0, 0, 0, .8);     /* an app icon on a dark stage (Pro's Support hero) */

    /* Type (§2.3) */
    --f-display: Rajdhani, "Rajdhani FB Apple", "Rajdhani FB Win", "Arial Narrow", sans-serif;
    --f-text: Roboto, "Roboto Fallback", -apple-system, "Segoe UI", Arial, sans-serif;
    --f-symbol: -apple-system, BlinkMacSystemFont, "Segoe UI Symbol", "Segoe UI", sans-serif;   /* › ↗ (in neither webfont) */
    /* Display sizes are set for Rajdhani 700 UPPERCASE (EA touches): capitals read ~15% bigger,
       so they are ~10% smaller than sentence-case sizes. */
    --t-hero: clamp(40px, 3.05vw + 28px, 72px);
    --t-headline: clamp(32px, 2.29vw + 23px, 56px);
    --t-tile: clamp(28px, 1.14vw + 22px, 40px);
    --t-title: clamp(24px, .38vw + 22.5px, 28px);
    --t-number: clamp(64px, 5.33vw + 43.2px, 120px);
    --t-sub: clamp(21px, .667vw + 18.4px, 28px);
    --t-body-lg: clamp(17px, .38vw + 15.5px, 21px);
    --t-body: 17px;
    --t-cta: clamp(16px, .1vw + 15.6px, 17px);    /* LEARN MORE › : Rajdhani 600 caps */
    --t-nav: 16px;                                 /* EA compact navbar */
    --t-eyebrow: 13px;                             /* 14px from 768 */
    --track-caps: .12em;                           /* eyebrows, menu labels, footer titles */
    --track-nav: 1.5px;                            /* nav, CTAs, breadcrumb (~.09em) */
    --t-small: 14px;
    --t-fine: 13px;

    /* Layout (§2.1–2.2) */
    --gutter: clamp(16px, 2.5vw + 6px, 40px);
    --w-copy: 680px;
    --w-content: 980px;
    --w-wide: 1200px;
    --section-y: clamp(80px, 7.62vw + 50px, 160px);
    --tile-pad-top: clamp(40px, 1.52vw + 34px, 56px);
    --tile-gap: 12px;
    --gap-head-sub: 8px;
    --gap-sub-cta: 20px;
    --gap-cta-media: 40px;
    --header-h: 56px;              /* 72px from 768 */
    --localnav-h: 52px;
    --crumb-h: 44px;
    --bar-w: 60px;                 /* the EA red accent bar */
    --bar-h: 4px;
    --radius-btn: 6px;
    --radius-menu: 8px;

    /* Motion (§2.8) */
    --d-fast: 120ms;
    --d-base: 240ms;
    --d-theme: 320ms;
    --ease: cubic-bezier(.2, 0, 0, 1);
  }

  @media (min-width: 768px) {
    :root { --gap-head-sub: 10px; --gap-sub-cta: 24px; --gap-cta-media: 48px; --header-h: 72px; --t-eyebrow: 14px; }
  }
  @media (min-width: 1024px) {
    :root { --gap-head-sub: 12px; --gap-cta-media: 56px; }
  }
  @media (min-width: 1440px) {
    :root { --gap-sub-cta: 28px; --gap-cta-media: 56px; }
  }

  /* Dark pages (<body class="theme-dark">, Real Solitaire Retro): the same tokens, flipped, so the
     header, local nav, dropdowns, menus, search, breadcrumb and footer follow without extra markup.
     Contrast on #0B0B0F: ink 18.0, muted 7.6, red-on-dark 6.4. */
  .theme-dark {
    color-scheme: dark;
    --c-bg: #0B0B0F;
    --c-band: #161618;
    --c-ink: #F5F5F7;
    --c-muted: #A1A1A6;
    --c-link-quiet: #D2D2D7;
    --c-hairline: rgba(255, 255, 255, .12);
    --c-positive: #30D158;
    --c-field-border: #6E6E73;
    --c-sep: #6E6E73;
    --c-red-text: #FF5A52;
    --c-red-press: #B42222;        /* white label 6.6:1 */
    --c-row-active: rgba(255, 255, 255, .08);
    --c-menu: #1C1C1F;
    --c-surface-dark: #1C1C1F;     /* a dark band on a dark page lifts off it */
    --c-localnav-glass: rgba(11, 11, 15, .8);
    --c-skip-bg: #F5F5F7;
    --c-skip-ink: #0B0B0F;
    --c-scrim: rgba(0, 0, 0, .66);
    --shadow-menu: 0 16px 40px -8px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .4);
    --shadow-flyout: 0 24px 48px -24px rgba(0, 0, 0, .7);
    --shadow-dialog: 0 24px 64px -12px rgba(0, 0, 0, .8);
    --glow-stage-dark: rgb(255 255 255 / .075);   /* the same spotlight on the lifted dark band */
  }
  /* The html element too (its own rule: an unsupported :has() must not drop the one above), so the
     overscroll area stays dark. */
  :root:has(> body.theme-dark) { color-scheme: dark; --c-bg: #0B0B0F; }
  @media print {
    .theme-dark {
      color-scheme: light;
      --c-bg: #FFFFFF; --c-band: #F5F5F7; --c-ink: #1D1D1F; --c-muted: #6E6E73;
      --c-link-quiet: #424245; --c-hairline: #D2D2D7; --c-red-text: #C42828;
    }
  }
}