/* ═══════════════════════════════════════════════════════════════════════════
   tokens.css — the single source of visual truth.
   Nothing below this file should contain a raw colour, radius or duration.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surface ──────────────────────────────────────────────────────────
     Not pure white. A warm paper tone reads as gallery wall rather than
     browser default, and lets true-white glass panels lift off it.       */
  --paper:            #FCFCFA;
  --paper-deep:       #F4F3EF;
  --white:            #FFFFFF;

  /* ── Ink ─────────────────────────────────────────────────────────── */
  --ink:              #14151A;
  --ink-secondary:    #5E626C;
  --ink-tertiary:     #969AA4;
  --ink-quaternary:   #C2C5CC;
  --rule:             rgba(20, 21, 26, 0.08);
  --rule-strong:      rgba(20, 21, 26, 0.14);

  /* ── Accent ──────────────────────────────────────────────────────────
     Bronze for heritage, evergreen for the living. Both desaturated so
     they behave against a near-white field.                              */
  --bronze:           #A8763A;
  --bronze-bright:    #C89A55;
  --bronze-wash:      rgba(168, 118, 58, 0.10);
  --evergreen:        #2C7F63;
  --evergreen-bright: #3D9E7C;
  --evergreen-wash:   rgba(44, 127, 99, 0.10);

  /* ── Glass ───────────────────────────────────────────────────────────
     Layered: a translucent fill, a hairline top highlight, an outer ring
     and a wide soft shadow. Together they read as a physical pane.       */
  --glass-fill:       rgba(255, 255, 255, 0.72);
  --glass-fill-solid: rgba(255, 255, 255, 0.90);
  --glass-ring:       rgba(20, 21, 26, 0.07);
  --glass-highlight:  rgba(255, 255, 255, 0.85);
  --glass-blur:       saturate(1.7) blur(22px);

  /* ── Elevation ───────────────────────────────────────────────────────
     Two stacked shadows: a tight contact shadow plus a wide ambient one.
     This is what separates "a div with a box-shadow" from a real object. */
  --shadow-1: 0 1px 2px rgba(20, 21, 26, 0.04),
              0 4px 14px rgba(20, 21, 26, 0.05);
  --shadow-2: 0 1px 2px rgba(20, 21, 26, 0.05),
              0 8px 26px rgba(20, 21, 26, 0.07);
  --shadow-3: 0 2px 4px rgba(20, 21, 26, 0.05),
              0 18px 50px rgba(20, 21, 26, 0.10),
              0 40px 90px rgba(20, 21, 26, 0.06);

  /* ── Radii ───────────────────────────────────────────────────────── */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  26px;
  --r-pill: 999px;

  /* ── Type ─────────────────────────────────────────────────────────────
     No web fonts: an archive should not depend on a CDN to look right.
     The serif stack resolves to genuinely beautiful faces on every OS.   */
  --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua',
                  'Hoefler Text', Georgia, 'Times New Roman', serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
             Inter, Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --t-xs:   11px;
  --t-sm:   12.5px;
  --t-base: 14px;
  --t-md:   15.5px;
  --t-lg:   19px;
  --t-xl:   26px;
  --t-2xl:  34px;
  --t-3xl:  clamp(38px, 6.2vw, 74px);

  --tracking-wide:  0.09em;
  --tracking-wider: 0.16em;

  /* ── Spacing ─────────────────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  22px;
  --s-6:  30px;
  --s-7:  40px;
  --s-8:  56px;

  /* ── Motion ───────────────────────────────────────────────────────────
     Two families. `--ease-out` for things arriving under the user's
     finger. `--ease-soft` for ambient, unprompted motion.                */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 0, 0.15, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --d-instant: 120ms;
  --d-fast:    200ms;
  --d-base:    340ms;
  --d-slow:    620ms;
  --d-glacial: 1100ms;

  /* ── Layers ──────────────────────────────────────────────────────── */
  --z-canvas:  0;
  --z-labels:  10;
  --z-chrome:  20;
  --z-panel:   30;
  --z-sheet:   40;
  --z-intro:   50;
  --z-fatal:   60;

  /* ── Geometry ────────────────────────────────────────────────────── */
  --panel-w: 372px;
  --gutter: clamp(16px, 2.4vw, 34px);
}

/* Users who prefer less motion get the same interface, immediately. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-instant: 1ms;
    --d-fast:    1ms;
    --d-base:    1ms;
    --d-slow:    1ms;
    --d-glacial: 1ms;
  }
}