/* ==========================================================================
   Wild Sheep — design tokens
   Every value here is measured from the Adobe XD comp (1920px canvas).
   WordPress port: these become the palette + typography in theme.json.
   ========================================================================== */

@font-face {
  font-family: 'SCHABO';
  src: url('../fonts/SCHABO-XCondensed.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- Colour ---------------------------------------------------------- */
  --ink:            #2E2E2E;   /* body text, dark bands, and ALL display type —
                                  the same grey the WILD SHEEP wordmark is painted
                                  in, so type and logo sit at one weight. There is
                                  deliberately no blacker ink than this. */
  --paper:          #F7F7F7;   /* page background */
  --paper-tint:     #F0EFF3;   /* one step off paper, faintly purple-leaning —
                                  separates a section without a hard band */
  --white:          #FFFFFF;
  --green:          #27DB88;   /* every CTA, border and interactive accent */
  --green-dark:     #12A863;   /* hover state, meets contrast on paper */
  --purple:         #9445FF;   /* Wild Sheep / Origins */
  --purple-light:   #A15EFD;   /* hero brush stroke; also purple ON the dark
                                  band — --purple is only 2.95:1 there */
  --hero-base:      #0B1622;   /* sits under the game-hero key art, matched to
                                  the darkest zone of the artwork itself */
  --hero-scrim:     rgba(0, 0, 0, 0.55);  /* readability wash behind the hero's
                                  copy column. Neutral black rather than --ink:
                                  it is a shade over artwork, not a surface, and
                                  #2E2E2E is too light to darken a bright sky */
  --orange:         #FF932E;   /* Wild Sheep Classic */
  --rule:           rgba(46, 46, 46, 0.18);
  --rule-invert:    rgba(255, 255, 255, 0.22);
  --rule-invert-50: rgba(255, 255, 255, 0.5);   /* hairline panels on a brand
                                                   colour — the Engagement Tools
                                                   cards and their icons */

  /* One stroke weight for every outline in the button language — buttons,
     carousel arrows, the sort select, the demo frame, the promo cards. Change
     it here and the whole site's outlines move together. */
  --rule-w:         2px;

  /* ---- Type ------------------------------------------------------------ */
  /* Neither face has CJK glyphs, so Chinese falls through to these. Named
     explicitly so every platform lands on a proper Simplified Chinese face
     rather than whatever the browser's generic default happens to be. */
  --font-display: 'SCHABO', 'Arial Narrow', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --font-body:    'Space Grotesk', system-ui, -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;

  /* Weight is a two-step system, not a per-rule choice: prose is 400, and 700
     is the only step up — for <b>, buttons, form status, and small uppercase
     meta labels. 300 is reserved for the two oversized standfirsts (the
     personalisation statement and the brochure cover), where the size carries
     the emphasis and Regular would look heavy. Nothing sits at 500. */

  /* Display sizes fluid between a 1280px and 1920px viewport.
     Upper bounds are the exact comp values. */
  --d-xl: clamp(5.5rem, 10.68vw, 12.813rem);   /* 205px — GAME LIBRARY, BE THE NEXT */
  --d-lg: clamp(3.75rem, 6.25vw, 7.5rem);      /* 120px — HOT GAMES!, game titles   */
  --d-md: clamp(3rem,  5.885vw, 7.063rem);     /* 113px — PROMOTION TOOLS, NEWS     */
  --d-sm: clamp(2.75rem, 4.69vw, 5.625rem);    /*  90px — carousel card titles      */
  --d-xs: clamp(2.25rem, 3.39vw, 4.063rem);    /*  65px — value-prop headings       */
  --d-2xs: clamp(1.5rem, 2.08vw, 2.5rem);      /*  40px — labelling headings that
                                                   sit above larger content, e.g.
                                                   the promoted game-card titles.
                                                   NOT the game page's section
                                                   headings: those are all --d-xs,
                                                   SPECIFICATION included         */

  --t-lead:   clamp(1.75rem, 2.5vw, 3rem);     /*  48px — personalisation statement */
  --t-xl:     clamp(1.375rem, 1.56vw, 1.875rem); /* 30px — game tagline             */
  --t-lg:     clamp(1.125rem, 1.198vw, 1.438rem); /* 23px — intro body, section lead */
  --t-btn:    clamp(0.938rem, 1.094vw, 1.313rem); /* 21px — buttons                 */
  --t-body:   clamp(0.938rem, 0.938vw, 1.125rem); /* 18px — body copy               */
  --t-eyebrow: 1rem;                            /*  16px — S L O T S                */
  --t-small:  0.813rem;

  --lh-tight: 0.82;   /* SCHABO sits tight — matches the comp's stacked headings */
  --lh-lead:  1.24;   /* the personalisation statement — large type needs less */
  --lh-body:  1.45;

  /* SCHABO ships a single 400 weight. Without this, any heading element
     (h1–h6, b) asks for 700 and the browser fakes it by smearing the glyphs
     horizontally, which destroys the counters at display sizes. */
  font-synthesis-weight: none;
  font-synthesis: none;

  /* ---- Layout ---------------------------------------------------------- */
  --canvas:    1920px;
  --container: 1530px;  /* content column: 195px gutters on a 1920 canvas */
  --gutter:    clamp(1.25rem, 10.156vw, 12.188rem);
  --grid-gap:  clamp(0.5rem, 0.833vw, 1rem);   /* 16px between game tiles */

  /* 180px vertical section rhythm. The FLOORS are set against the type rather
     than against the viewport: below ~850px the vw term has fallen away and a
     phone gets whatever the floor says, but the body copy inside these sections
     does not shrink to match — --t-body bottoms out at 15px and --t-small is a
     flat 13px at every width. The floors were originally 4rem/2.5rem, which
     gave the same text roughly half the air it has on a desktop and read as
     cramped. Raised to keep the ratio closer; the vw term and the upper bound
     are untouched, so nothing above ~1000px moves at all. */
  --sec-y:     clamp(5rem, 9.375vw, 11.25rem);
  --sec-y-sm:  clamp(3.25rem, 5.2vw, 6.25rem);

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  260ms;
}

/* The comp is a light-mode design and the brand depends on it, so the palette
   is fixed. Dark-mode users still get the intended contrast. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* SCHABO alone, for type that is ALWAYS English in every locale — the landing
   lockups and game titles. Chinese points those at this so they keep the brand
   face while the rest of the display type goes Chinese. */
:root { --font-display-latin: 'SCHABO', 'Arial Narrow', sans-serif; }

/* Chinese sets NO SCHABO (client call 2026-09-22): mixing it with the
   Chinese face inside one heading read as two typefaces fighting. So Latin words
   and figures in a Chinese heading take the Chinese face too. EXCEPT the
   all-English type — see --font-display-latin, used in site.css / brochure.css.
   ZCOOL QingKe HuangYou (client pick, 2026-09-22) is loaded by locale-ui.js from
   Google Fonts for Chinese ONLY; the system faces after it are the fallback. 'Arial Narrow' is
   dropped for the same reason. Brand lockups are artwork and are unaffected. */
:root:lang(zh) {
  --font-display: 'ZCOOL QingKe HuangYou', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}