/* ==========================================================================
   memori — Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for the visual language: a warm-dark "archive"
   palette, editorial serif display (Fraunces), Instrument Sans body text,
   IBM Plex Mono micro-labels and one ember accent.

   Never hardcode colors, spacing or font sizes in the other stylesheets —
   reference a token (or color-mix() on one) instead.

   The type/spacing ladders lean fine-grained (the design runs on mono
   micro-labels); near-identical steps share one value (±2px) instead of being
   removed, so call-sites keep their semantic names.
   ========================================================================== */

/* ---- Self-hosted webfonts (latin subsets; the CSP forbids CDNs) ----------
   Regenerate with tools/fetch-web-assets.ps1 — bump filenames when the
   files change (they are cached immutable under /assets/*). --------------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/fraunces-normal-300-900.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/fraunces-italic-300-900.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/instrument-sans-normal-400-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-normal-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-normal-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-normal-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* ---- Surfaces ---------------------------------------------------------- */
  --bg:      #0D0C0A;
  --bg-2:    #100F0C;
  --panel:   #151310;
  --panel-2: #12100D;
  --void:    #080706;               /* the "walled garden" panel */
  --well:    #0B0A09;               /* export preview well */
  --nav-bg:    rgba(13, 12, 10, 0.84);
  --ledger-bg: rgba(13, 12, 10, 0.7);

  /* ---- Ink ---------------------------------------------------------------- */
  --cream: #EFE9DC;                 /* primary text on dark */
  --ink:   #14110C;                 /* text on cream / accent surfaces */
  --soft:  rgba(239, 233, 220, 0.72);
  /* 0.56 clears WCAG AA (≈5.5:1 on --bg); the old 0.42 alpha sat under 4.5:1
     and --faint is used on readable text, not just decoration */
  --faint: rgba(239, 233, 220, 0.56);
  --preview-text: rgba(239, 233, 220, 0.78);

  /* ---- Hairlines ------------------------------------------------------------ */
  --hair:        rgba(239, 233, 220, 0.11);
  --hair-strong: rgba(239, 233, 220, 0.24);
  --line:        rgba(239, 233, 220, 0.2);
  --guide:       rgba(239, 233, 220, 0.09);  /* machine flight guides */
  --thread:      rgba(239, 233, 220, 0.3);   /* machine link threads */
  --dot:         rgba(239, 233, 220, 0.05);  /* hero dotted paper */

  /* ---- Accent (ember) --------------------------------------------------------- */
  --accent:      #FF7A29;
  --accent-hi:   #FFA45C;
  --accent-deep: #C2410C;

  /* ---- Typography ----------------------------------------------------------------- */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto,
               Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, Menlo,
               monospace;

  /* display type */
  --fs-hero:         clamp(2.5rem, 6.4vw, 5rem);
  --fs-display:      clamp(2rem, 3.7vw, 3.15rem);
  --fs-display-cta:  clamp(2.1rem, 4vw, 3.3rem);
  --fs-mmenu:        clamp(2rem, 8vw, 2.8rem);
  --fs-brand:        1.32rem;
  --fs-brand-mark:   1.19rem;
  --fs-watermark:    clamp(64px, 21vw, 260px);
  /* body type */
  --fs-sub:          clamp(1.02rem, 1.3vw, 1.16rem);
  --fs-input-touch:  1rem;   /* iOS Safari zooms focus below 16px */
  --fs-answer:       clamp(1.02rem, 1.4vw, 1.14rem);
  --fs-search:       clamp(1.15rem, 2vw, 1.5rem);
  --fs-search-ph:    clamp(1.1rem, 2vw, 1.45rem);
  --fs-prow-heading: clamp(1.15rem, 1.8vw, 1.4rem);
  --fs-lead:         1.05rem;
  --fs-xl:           0.98rem;
  --fs-lg:           0.93rem;
  --fs-md:           0.84rem;
  --fs-sm:           0.78rem;
  --fs-xs:           0.72rem;
  /* folded onto one ~10.5px step — the old 0.62rem floor (9.9px) was below
     the readable minimum even for uppercase mono micro-labels */
  --fs-2xs:          0.66rem;
  --fs-3xs:          0.66rem;

  /* ---- Spacing ladder ---------------------------------------------------------------- */
  --sp-0:  4px;
  --sp-1:  8px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  12px;
  --sp-5:  16px;
  --sp-6:  16px;
  --sp-7:  20px;
  --sp-8:  24px;
  --sp-9:  24px;
  --sp-10: 28px;
  --sp-11: 28px;
  --sp-12: 36px;
  --sp-13: 48px;

  /* ---- Layout -------------------------------------------------------------------------- */
  --wrap-max:    1220px;
  --wrap-pad:    clamp(20px, 4vw, 48px);
  --hero-pad-top: clamp(96px, 13vh, 144px);  /* hero text block: fixed header + breathing room */
  --section-pad: clamp(64px, 8.5vh, 104px);  /* per side — sections stack, so the visible gap between two sections is 2× this */
  --header-h:    72px;
  --scroll-pad:  92px;   /* fixed header + breathing room for anchor jumps */
  --sticky-top:  calc(var(--header-h) + var(--sp-9));  /* sticky panels below the fixed header */

  /* icon boxes (grid columns + square icon frames share these) */
  --icon-box-s: 24px;   /* machine stack cards, port icons */
  --icon-box-m: 32px;   /* capture feed / search result icons */
  --icon-box-l: 36px;   /* capture feed / search result grid columns */

  /* ---- Z-index --------------------------------------------------------------------------- */
  --z-nav:    50;
  --z-mmenu:  60;
  --z-toasts: 100;

  /* ---- Motion ------------------------------------------------------------------------------ */
  --ease-rise: cubic-bezier(0.19, 0.7, 0.22, 1);
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-pop:  cubic-bezier(0.2, 0.9, 0.3, 1.4);
  --ease-snap: cubic-bezier(0.3, 0.7, 0.25, 1);
  /* interactive-state transition durations; one-off keyframe choreography
     (entrances, shakes, typewriters) stays literal in components.css */
  --dur-fast:   .18s;
  --dur-med:    .25s;
  --dur-slow:   .35s;
  --dur-reveal: .7s;

  /* ---- Elevation ------------------------------------------------------------------------------ */
  --toast-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);  /* toasts + top-layer popover */
  --ring-accent:  inset 0 0 0 1px var(--accent);   /* selected tray citation */

  /* ---- Radii ---------------------------------------------------------------------------------- */
  --radius-s: 2px;   /* controls: buttons, chips, inputs, kbd */
  --radius-m: 3px;   /* machine cards */
  --radius-l: 4px;   /* large surfaces */
}