/* ==========================================================================
   ARSENE GAME STUDIO — design tokens (brief §2)
   The ONLY file on the site that may contain a literal colour.
   Everything else reads these custom properties.
   ========================================================================== */

:root {
  /* ---- 2.1 colour: paper and ink ---------------------------------------- */
  --ink:         #070607;   /* page background; never pure #000 */
  --ink-2:       #0E0C0D;   /* second ink: ticker strips, letter form background */
  --plate:       #141214;   /* folio boxes, dossier, ledger rows, index plates */
  --line:        rgba(255, 255, 255, 0.08);  /* hairlines between plates */
  --line-strong: rgba(255, 255, 255, 0.18);  /* rules that must read (hero rule, table heads) */
  --paper:       #E8E3D6;   /* ivory: display type, rules, cursor card, character contours */
  --text:        #F2EFEE;   /* body text */
  --muted:       #8F8889;   /* mono labels, datelines, captions (5.3:1 on --ink) */
  --char-ink:    #111111;   /* fill of every character's INK layer (one step above --ink) */
  --logo-white:  #F2F2F2;
  --demon-smoke: #1E0705;   /* behind the hero's demon art (fills the letters the art does not reach) */
  --demon-pupil: #2A0200;   /* the demon's slit pupils */
  --vignette-mid: rgba(7,6,7,.55); /* the darkness closing in as the demon reaches */
  --scratch-core: #FF5A36;  /* the claw marks' hot core */
  --gash-dark: #070203;     /* inside a gash */
  --hand-halo: rgba(190,26,12,.72);   /* the demon hand's backlight */
  --hand-burn: rgba(255,70,36,.8);
  --hand-aura: rgba(160,22,10,.34);
  --hand-aura-far: rgba(70,8,5,.14);   /* the letters of the supplied logo */
  --char-ink-lit: #1F1B1D;  /* the same ink inside the hero stencil windows (two steps above --ink) */

  /* the studio accent: rose, sampled from the logo */
  --rose:        #E03020;
  --rose-deep:   #9E1408;   /* hover state of rose marks, seal shadow ring */
  --rose-dark:   #4A0A05;   /* dark end of the rose petal gradient only */
  --rose-glow:   rgba(224, 48, 32, 0.35); /* the one glow on the site: behind the hero rose */
  --rose-text:   #EE4A38;   /* the rose for SMALL text only (5.5:1 on --ink, 5.3:1 on --ink-2, 5.0:1 on --plate):
                               form errors, status words, the open row's number, mono link hovers. Marks, rules,
                               glyphs, the stencil stroke, the 44px spine number and every display size keep --rose */
  --rose-stroke: #2A0603;   /* petal outline (rose only) */
  --rose-petal-0: #E8402E;  /* petal gradient, centre (rose only) */
  --rose-petal-1: #B81C0E;  /* petal gradient, 70% (rose only) */

  /* the live accent. GSAP tweens THIS; components only ever read it */
  --hue:         var(--rose);
  /* the live accent on small text: the game hue while one is live (all five ≥ 8:1), the rose tint at rest.
     ARSENE.hue writes it next to --hue; components with small-text duties read this one */
  --hue-text:    var(--rose-text);

  /* per-game hues (editorial, not neon). Written into --hue while a game is centred */
  --hue-nocturne:  #E03020;  /* rose  */
  --hue-kestrel:   #7FB4E6;  /* steel */
  --hue-saltwater: #2FB8B0;  /* teal  */
  --hue-gilded:    #D9A94A;  /* bone-gold (game hue only, never UI) */
  --hue-fall:      #F2A13C;  /* FALL AGAIN: SKY RUSH (sampled from its cover) */
  --hue-paper:     #F2A07B;  /* peach */
  --peach-mid:     #E58B64;  /* Pip only */
  --peach-light:   #FFC2A3;  /* Pip only */

  /* proof mode (high contrast) overrides, applied on html[data-proof="true"] */
  --proof-ink:   #000000;
  --proof-text:  #FFFFFF;

  /* derived, non-colour knobs that components read */
  --grain-opacity: 0.045;
  --stencil-lines: 1;           /* hero.js reads this: 1 line (desktop/tablet) or 2 ("ars"/"ene", phone) */

  /* ---- 2.2 type scale (fluid) ------------------------------------------- */
  --fs-stencil:  clamp(96px, 22vw, 520px);   /* hero "arsene", one line ≥640px; two lines below */
  --fs-chapter:  clamp(56px, 11vw, 240px);   /* chapter titles, game titles, "Join the crew" */
  --fs-word:     clamp(72px, 16vw, 360px);   /* manifesto pinned words */
  --fs-hello:    clamp(48px, 10vw, 200px);   /* "Say hello" (Instrument Serif) */
  --fs-colophon: clamp(120px, 30vw, 900px);  /* footer "arsene", clipped */
  --fs-h2:       clamp(32px, 4.5vw, 72px);   /* section sub-heads */
  --fs-quote:    clamp(28px, 3.2vw, 48px);   /* dossier pull quote */
  --fs-lead:     clamp(20px, 1.8vw, 28px);   /* italic serif lines (pitches, taglines) */
  --fs-body:     clamp(17px, 1.25vw, 20px);  /* serif body, 1.4 line-height */
  --fs-ui:       15px;                        /* Archivo 400 wdth 100, nav/ledger/form */
  --fs-mono:     clamp(11px, 0.8vw, 13px);   /* mono labels, uppercase, 0.12em tracking */
  --fs-mono-lg:  clamp(14px, 1.1vw, 18px);   /* "No. 01" folio numbers */

  --lh-display: 0.92;
  --lh-serif:   1.4;
  --lh-ui:      1.5;
  --lh-mono:    1.6;
  --ls-display: -0.02em;
  --ls-mono:    0.12em;

  /* ---- 2.3 spacing, grid, radii ----------------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 16px; --space-4: 24px; --space-5: 40px;
  --space-6: 64px; --space-7: 96px; --space-8: 160px;
  --gutter:    clamp(16px, 4vw, 72px);        /* page side padding */
  --section-y: clamp(96px, 14vh, 200px);      /* vertical padding between chapters */
  --content-max: 1800px;                      /* grid cap; gutters grow beyond */
  --cols: 12; --col-gap: clamp(12px, 1.5vw, 32px);
  --spine-w: 56px;                            /* left nav rail (desktop) */
  --topbar-h: 64px;
  --strip-h: 44px;                            /* mobile bottom strip */
  --radius: 0;                                /* a printed object has no rounded corners */
  --radius-card: 2px;                         /* cursor card and the calling-card micro-moment only */
  --hairline: 1px;

  /* ---- motion constants (durations/easings only; motion.css owns keyframes) */
  --ease-expo: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --t-micro:   180ms;

  /* ---- 2.5 z-index ladder ------------------------------------------------ */
  --z-drift: 0; --z-content: 1; --z-rules: 5; --z-gallery: 10; --z-lineup: 20;
  --z-sheet: 30; --z-dossier: 40; --z-chrome: 50; --z-strip: 55; --z-grain: 60;
  --z-cursor: 70; --z-loader: 80; --z-skip: 90;
}

/* phone: the stencil wraps to "ars" / "ene" at 24vw (brief §4.1, §9) */
@media (max-width: 639px) {
  :root {
    --fs-stencil: 24vw;
    --stencil-lines: 2;
  }
}

/* ==========================================================================
   PROOF MODE — "pull a proof": pure black / white, no effects (brief §7.5, §10)
   Toggled by the PROOF button / W key (html[data-proof="true"]), persisted,
   and auto-enabled by prefers-contrast: more unless the user turned it off.
   ========================================================================== */
html[data-proof="true"] {
  --ink:         var(--proof-ink);
  --ink-2:       var(--proof-ink);
  --plate:       var(--proof-ink);
  --line:        rgba(255, 255, 255, 0.45);
  --line-strong: var(--proof-text);
  --paper:       var(--proof-text);
  --text:        var(--proof-text);
  --muted:       #D0D0D0;
  --char-ink:    var(--proof-ink);
  --char-ink-lit: var(--proof-ink);
  --hue:         var(--proof-text);
  --hue-text:    var(--proof-text);
  --rose-text:   var(--proof-text);
  --rose-glow:   transparent;
  --grain-opacity: 0;
}

/* without JS the media query alone pulls the proof; with JS the head bootstrap sets html[data-proof]
   under prefers-contrast: more unless the visitor switched it off (localStorage 'arsene-proof' = 'false') */
@media (prefers-contrast: more) {
  html:not(.js) {
    --ink:         var(--proof-ink);
    --ink-2:       var(--proof-ink);
    --plate:       var(--proof-ink);
    --line:        rgba(255, 255, 255, 0.45);
    --line-strong: var(--proof-text);
    --paper:       var(--proof-text);
    --text:        var(--proof-text);
    --muted:       #D0D0D0;
    --char-ink:    var(--proof-ink);
    --hue:         var(--proof-text);
    --hue-text:    var(--proof-text);
    --rose-text:   var(--proof-text);
    --rose-glow:   transparent;
    --grain-opacity: 0;
  }
}

/* LITE MODE — the frame-time guard tripped (brief §8.4): no grain, static width axis */
html[data-lite] {
  --grain-opacity: 0;
}

/* reduced transparency: grain and blend layers removed (brief §10) */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --grain-opacity: 0;
    --rose-glow: transparent;
  }
}