/* ==========================================================================
   DuneForge — design tokens
   "From dune to forge": a desert day told as a comic issue.
   Noon on the dunes (flat Moebius colour) -> golden hour -> dusk -> the forge at night.
   Shared by duneforge.games and duneforge.studio (.ae / .net). Keep both copies identical.
   ========================================================================== */

/* ---- Fallback faces, metric-matched to the web fonts ----------------------
   Until Shantell Sans and Dela Gothic One arrive (font-display: swap), text is set in a
   local Arial / Arial Bold / Arial Black scaled to the web font's widths and line metrics,
   so lines break in (nearly) the same places and the page does not jump when the web
   fonts swap in. Liberation Sans (Linux, same metrics as Arial) and Roboto (Android) are
   listed too; where none exists the face is skipped. Arabic is not covered: it falls
   through to Readex Pro, Marhey and Lalezar as before.
   size-adjust was measured in Chrome on the real page texts, per weight band and per
   script (Latin / Cyrillic): Shantell Sans is 10.5% / 6.5% wider than Arial at 300-450,
   13.5% / 9.5% at 451-550, and 8.5% / 5.5% wider than Arial Bold at 551-800; Dela Gothic
   One is about 4% / 6% wider than Arial Black. The *-override values are the web font's
   ascent (Shantell 1.02em, Dela 1.16em) and descent (0.32em, 0.29em) / size-adjust. */
@font-face {
  font-family: "Shantell Fallback"; font-weight: 300 450; font-display: swap;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Roboto"), local("Roboto-Regular");
  size-adjust: 110.5%; ascent-override: 92.3%; descent-override: 29%; line-gap-override: 0%;
  unicode-range: U+0000-024F, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-214F;
}
@font-face {
  font-family: "Shantell Fallback"; font-weight: 300 450; font-display: swap;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Roboto"), local("Roboto-Regular");
  size-adjust: 106.5%; ascent-override: 95.8%; descent-override: 30%; line-gap-override: 0%;
  unicode-range: U+0400-04FF;
}
@font-face {
  font-family: "Shantell Fallback"; font-weight: 451 550; font-display: swap;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Roboto"), local("Roboto-Regular");
  size-adjust: 113.5%; ascent-override: 89.9%; descent-override: 28.2%; line-gap-override: 0%;
  unicode-range: U+0000-024F, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-214F;
}
@font-face {
  font-family: "Shantell Fallback"; font-weight: 451 550; font-display: swap;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Roboto"), local("Roboto-Regular");
  size-adjust: 109.5%; ascent-override: 93.2%; descent-override: 29.2%; line-gap-override: 0%;
  unicode-range: U+0400-04FF;
}
@font-face {
  font-family: "Shantell Fallback"; font-weight: 551 800; font-display: swap;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 108.5%; ascent-override: 94%; descent-override: 29.5%; line-gap-override: 0%;
  unicode-range: U+0000-024F, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-214F;
}
@font-face {
  font-family: "Shantell Fallback"; font-weight: 551 800; font-display: swap;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 105.5%; ascent-override: 96.7%; descent-override: 30.3%; line-gap-override: 0%;
  unicode-range: U+0400-04FF;
}
@font-face {
  font-family: "Dela Fallback"; font-weight: 400; font-display: swap;
  src: local("Arial Black"), local("Arial-Black");
  size-adjust: 104%; ascent-override: 111.5%; descent-override: 27.9%; line-gap-override: 0%;
  unicode-range: U+0000-024F, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-214F;
}
@font-face {
  font-family: "Dela Fallback"; font-weight: 400; font-display: swap;
  src: local("Arial Black"), local("Arial-Black");
  size-adjust: 106%; ascent-override: 109.4%; descent-override: 27.4%; line-gap-override: 0%;
  unicode-range: U+0400-04FF;
}

:root {
  /* ---- Core palette ------------------------------------------------------ */
  --noon:        #9FDCD6;  /* noon sky, pale turquoise */
  --noon-haze:   #E3F2E4;  /* sky near the horizon at noon */
  --dune:        #F6BC82;  /* sunlit dune */
  --dune-deep:   #E8956A;  /* dune shade */
  --rose:        #E06A86;  /* rose shadow on the sand */
  --lilac:       #9E86D1;  /* far distance, mirage */
  --ink:         #241A4A;  /* indigo ink: outlines and text on paper */
  --ink-soft:    #4A3F75;  /* secondary text on paper */
  --paper:       #FFF3DF;  /* panel paper */
  --paper-white: #FFFCF5;  /* balloon fill */
  --molten:      #FFD25E;  /* caption boxes, molten gold */
  --ember:       #FF7A1F;  /* forge orange */
  --ember-hot:   #FF4D2E;  /* hottest metal, use sparingly */
  --night:       #150F3A;  /* desert night sky */
  --night-2:     #231A55;  /* night panel */
  --night-line:  #6E5BA8;  /* panel border at night */
  --star:        #FFF0C2;
  --oasis:       #2FB8A8;  /* decorative turquoise (fills only) */
  --oasis-ink:   #0E6F66;  /* turquoise that passes contrast on paper */

  /* Sky keyframes (top / bottom) used by the time-of-day system */
  --sky-noon-top:    #8ED6D3;  --sky-noon-bottom:    #E9F3DA;
  --sky-gold-top:    #F7CF7E;  --sky-gold-bottom:    #F8A56C;
  --sky-sunset-top:  #E9767A;  --sky-sunset-bottom:  #9C5A9E;
  --sky-dusk-top:    #4E3584;  --sky-dusk-bottom:    #2B1D62;
  --sky-night-top:   #0F0B2C;  --sky-night-bottom:   #1D1448;

  /* ---- Typography --------------------------------------------------------- */
  /* Latin/Cyrillic face first (then its metric-matched local fallback), Arabic face
     next: the browser falls back per glyph. */
  --font-display: "Dela Gothic One", "Dela Fallback", "Lalezar", "Arial Black", system-ui, sans-serif;
  --font-text:    "Shantell Sans", "Shantell Fallback", "Readex Pro", "Segoe UI", system-ui, sans-serif;
  --font-letter:  "Shantell Sans", "Shantell Fallback", "Marhey", "Comic Sans MS", system-ui, cursive;

  /* Classical scale (Bringhurst): 12 14 16 18 21 24 36 48 60 72 96 */
  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.875rem;   /* 14 */
  --fs-base: 1.125rem;   /* 18 */
  --fs-md:   1.3125rem;  /* 21 */
  --fs-lg:   1.5rem;     /* 24 */
  --fs-xl:   2.25rem;    /* 36 */
  --fs-2xl:  3rem;       /* 48 */
  --fs-3xl:  3.75rem;    /* 60 */
  --fs-4xl:  4.5rem;     /* 72 */
  --fs-5xl:  6rem;       /* 96 */

  --fs-h1: clamp(2.25rem, 1.55rem + 2.9vw, 4rem);      /* 36 -> 64 */
  --fs-h2: clamp(2rem, 1.45rem + 2.4vw, 3.75rem);      /* 32 -> 60 */
  --fs-h3: clamp(1.3125rem, 1.15rem + 0.7vw, 1.75rem); /* 21 -> 28 */
  /* "DUNEFORGE" set in Dela Gothic One measures 8.10em wide; "DUNE" 3.60em, "FORGE" 4.50em */
  --fs-masthead: clamp(3.5rem, 10.6vw, 9.75rem);

  --lh-tight: 0.95;
  --lh-snug:  1.12;
  --lh-body:  1.55;
  --measure:  66ch;

  /* ---- Space, lines, shape ----------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --gutter:    clamp(10px, 1.6vw, 22px);   /* space between comic panels */
  --page-pad:  clamp(16px, 3vw, 40px);     /* page edge padding */
  --container: 1320px;

  --bw:      3px;                          /* panel border (ink line) */
  --bw-thin: 2px;                          /* balloons, captions */
  --r-panel: 2px;
  --r-btn:   10px;

  /* ---- Motion ------------------------------------------------------------- */
  --ease-out:  cubic-bezier(.2, .8, .2, 1);
  --ease-pop:  cubic-bezier(.3, 1.6, .5, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;

  /* ---- Layers ------------------------------------------------------------- */
  --z-sky:   0;
  --z-page:  1;
  --z-nav:   50;
  --z-toast: 80;
  --z-modal: 90;
}

/* Arabic needs a touch more size and leading, and never letter-spacing. */
:lang(ar) {
  --fs-base: 1.1875rem;
  --lh-body: 1.8;
  --lh-snug: 1.3;
  --lh-tight: 1.15;
}