/* ============================================================
   EVERIART — Design Tokens
   Master palette: Refined Minimalist Authority (locked)
   ============================================================ */

:root {
  /* --- Color: locked master palette --- */
  /* Authority Navy — the site's base ground. Every surface that is not the
     hero plate, a raised section or an image sits on this. The site carries
     no light surface anywhere; Parchment and Off-White are ink now, never
     backgrounds, and the pair below reads as base vs. raised rather than
     dark vs. light. */
  --navy-base:   #0D132D;  /* Authority Navy — base ground */
  --navy:        #1C2541;  /* Midnight Navy  — raised section */
  --charcoal:    #212121;  /* Deep Charcoal  — ink */
  --gunmetal:    #3A506B;  /* Gunmetal       — accent, hover, rules */
  --stone:       #8E8E8E;  /* Stone Gray     — meta, secondary */
  --parchment:   #F4F1DE;  /* Parchment      — warm light base */
  --offwhite:    #F8F8F8;  /* Soft Off-White — cool light base */

  /* Brand gold — sampled from the dot in the Everiart wordmark.
     Accent only, never a surface: the logo dot, the trademark mark,
     and the hero's call-to-action affordance. */
  --gold:        #B79B62;
  --gold-hi:     #CFB57E;  /* hover / focus lift */

  /* Cinematic black — the hero ground only.
     The background plate is neutral near-black; navy behind it would
     tint the stone's warm highlights cold. Every other dark surface
     on the site stays Midnight Navy. */
  --ink-deep:    #0B0B0C;

  /* Derived — transparency layers for material surfaces */
  --navy-a90:    rgba(28, 37, 65, 0.90);
  --navy-a60:    rgba(28, 37, 65, 0.60);
  --offwhite-a70: rgba(248, 248, 248, 0.70);
  /* Base-ground material: the nav's chrome past the hero. Dark now, because
     a light translucent bar is the one surface that would still read as a
     light region on an otherwise dark site — and apple-design §12 puts the
     heavier material on structural chrome, not the lighter one. */
  --navy-base-a72: rgba(13, 19, 45, 0.72);
  /* One hairline, because there is only one ground. --hairline-dk is kept as
     its alias so the on-dark rules that already name it keep working. */
  --hairline:    rgba(244, 241, 222, 0.18);
  --hairline-dk: rgba(244, 241, 222, 0.18);
  --gold-a40:    rgba(183, 155, 98, 0.40);

  /* Feedback ink. Both are read against Authority Navy, so they are the
     lifted variants rather than the ink-on-paper reds and greens they
     replaced (5.9:1 and 8.5:1 respectively). */
  --danger:      #D9776B;
  --danger-a12:  rgba(217, 119, 107, 0.12);
  --ok:          #7FC08C;

  /* A step above the ground without being a second surface colour —
     inputs, secondary button hover, anything that has to read as inset. */
  --lift-a06:    rgba(244, 241, 222, 0.06);
  --lift-a12:    rgba(244, 241, 222, 0.12);

  /* Hero scrim stops — neutral, so the plate keeps its own colour */
  --ink-a00:     rgba(11, 11, 12, 0);
  --ink-a55:     rgba(11, 11, 12, 0.55);
  --ink-a80:     rgba(11, 11, 12, 0.80);

  /* --- Type families --- */
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:  "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Type scale ---
     Tracking is size-specific (apple-design §15):
     large display = negative tracking; body = ~0; small labels = slightly positive. */
  --fs-display:  clamp(3.5rem, 13vw, 11rem);
  --fs-h1:       clamp(2.5rem, 6vw, 5rem);
  --fs-h2:       clamp(1.75rem, 3.4vw, 3rem);
  --fs-h3:       clamp(1.25rem, 2vw, 1.75rem);
  --fs-body:     clamp(1rem, 1.05vw, 1.125rem);
  /* These mirror --fs-body's pure-vw shape on purpose: all three begin
     growing within ~10px of the same viewport width (~1525px), so the
     proportions between body, small and meta hold at every size instead
     of drifting apart on wide screens. */
  --fs-small:    clamp(0.9375rem, 0.98vw, 1.0625rem);
  --fs-meta:     clamp(0.8125rem, 0.85vw, 0.9375rem);
  --fs-lede:     clamp(1.125rem, 1.6vw, 1.375rem);

  --tr-display: -0.045em;   /* tightest — large type reads too loose as it grows */
  --tr-h1:      -0.03em;
  --tr-h2:      -0.02em;
  --tr-h3:      -0.01em;
  --tr-body:     0;
  --tr-small:    0.012em;   /* the step between body 0 and meta — was missing,
                               so 15px text inherited body's 0 or improvised */
  --tr-lede:    -0.01em;
  --tr-meta:     0.06em;    /* small text opens up for legibility */

  --lh-display: 0.90;       /* leading tightens as size grows */
  --lh-h1:      1.02;
  --lh-h2:      1.10;
  --lh-body:    1.6;
  --lh-meta:    1.4;

  /* --- Layout --- */
  --gutter:     clamp(1.25rem, 5vw, 5rem);
  --maxw:       84rem;
  --measure:    68ch;        /* < 80 char line length */
  --section-y:  clamp(6rem, 14vh, 12rem);

  /* --- Motion (apple-design §4) ---
     Springs are implemented in JS. These are the
     non-gesture, non-interruptible fallbacks only. */
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:   120ms;
  --t-base:   240ms;
  --t-slow:   520ms;

  /* Spring constants consumed by js/spring.js
     damping 1.0 = critically damped (default UI)
     damping 0.8 = momentum/flick only */
  --spring-damping-ui:       1.0;
  --spring-response-ui:      0.36;
  --spring-damping-momentum: 0.8;
  --spring-response-momentum: 0.34;

  /* Stagger interval between subjects in a reveal. The hero's load sequence
     and every scroll reveal share it, so the site has one cascade rhythm
     rather than one per section. Read by js/main.js.

     Derived from the response it staggers rather than picked: a critically
     damped spring at response 0.5 is ~90% of the way in by 300ms. Six
     subjects at 60ms span 300ms, so the last one starts as the first
     arrives — the cascade is continuous, with no gap between subjects and
     no pile-up at the end. Halve it and a group reads as simultaneous;
     double it and a six-tile row takes most of a second to finish. */
  --stagger-step: 60ms;
}

/* Accessibility signals (apple-design §14) */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --navy-a90: #1C2541;
    --navy-a60: #1C2541;
    --offwhite-a70: #F8F8F8;
  }
}

@media (prefers-contrast: more) {
  :root {
    /* Stone lightens rather than darkens now: it is read against Authority
       Navy and Midnight Navy, never against a light ground. */
    --stone: #B4B4B4;
    --hairline: rgba(244, 241, 222, 0.55);
    --hairline-dk: rgba(244, 241, 222, 0.55);
  }
}