/* ============================================================
   Beth & Will — design tokens
   Concept: CLOSER — the subject only ever gets closer.
   Palette sampled from their own photographs (see docs/art-direction.md).
   ============================================================ */

/* Type direction matched to Beth's invitation suite:
   copperplate script accents + letterspaced garalde serif. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-italic-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Pinyon Script';
  src: url('/assets/fonts/pinyon-script.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Portal type-scale multiplier. @property-registered so a future
   calc(var(--step-3--raw) * var(--type-scale)) cannot be poisoned: an
   unregistered custom property holding a bad value makes the whole declaration
   invalid-at-computed-value-time and collapses the page, while a registered
   <number> falls back to initial-value: 1 (research/ARCHITECTURE.md §4.1).
   The --step-*--raw refactor is PHASE 5 (CONTEXT D-19) — that is the part
   carrying the Tier A byte-identity risk (sub-pixel font-size rounding, OQ4). */
@property --type-scale {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

:root {
  /* ---- colour · Beth's stated palette (questionnaire q12):
          emerald / deep green · dusty rose · ivory ---- */
  --c-bone: #f2eee3;      /* ivory — day ground */
  --c-night: #0d0e0d;     /* chapter 5 ground */
  --c-ink: #0f231b;       /* deep green-black — final ground, details */

  --c-umber: #1f4d3a;     /* emerald — display type on ivory */
  --c-amber: #b98a8c;     /* dusty rose — accents, rules, labels */
  --c-cream: #f0e9dc;     /* ivory type on dark grounds */
  --c-glacial: #8aa895;   /* sage — early captions */
  --c-neon: #c4209a;      /* neon-bar magenta — chapter 5 only, from their photo */

  /* ---- type ---- */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', serif;
  --font-script: 'Pinyon Script', cursive;
  --font-body: 'Cormorant Garamond', 'Iowan Old Style', serif;

  /* fluid scale, 390px → 1920px */
  --step--1: clamp(0.72rem, 0.68rem + 0.2vw, 0.85rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.35rem + 1.2vw, 2.5rem);
  --step-3: clamp(2.2rem, 1.7rem + 2.4vw, 4rem);
  --step-4: clamp(3rem, 2rem + 5vw, 6.5rem);
  --step-5: clamp(4rem, 2.4rem + 8vw, 10rem);
  --step-6: clamp(5rem, 2.6rem + 12vw, 15rem);

  /* Declared, not yet consumed. CON-02 check 1 requires every tokens[].var to be
     defined AND resolve non-empty; declaring it here makes that check honest
     rather than exempted. Nothing reads it until Phase 5. */
  --type-scale: 1;

  /* ---- space ---- */
  --space-1: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
  --space-2: clamp(1rem, 0.8rem + 1vw, 2rem);
  --space-3: clamp(2rem, 1.5rem + 2.5vw, 4.5rem);
  --space-4: clamp(3.5rem, 2.5rem + 5vw, 8rem);
  --space-5: clamp(6rem, 4rem + 10vw, 16rem);

  /* ---- motion ---- */
  --ease-film: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.4s;
  --dur-2: 0.8s;
  --dur-3: 1.6s;
}

/* R4 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0.01s;
    --dur-2: 0.01s;
    --dur-3: 0.01s;
  }
}

/* R4 class twin of the @media (prefers-reduced-motion: reduce) block above.
   A URL parameter cannot trigger a media query; ?portal=1&motion=off sets
   html.static (js/option4.js). Edit both or neither.
   `html.static` is the same element as `:root` with one more class, so it
   wins on specificity wherever it applies and changes nothing where it does
   not. */
html.static {
  --dur-1: 0.01s;
  --dur-2: 0.01s;
  --dur-3: 0.01s;
}

/* Placeholder facts — loud by design. Removed only by Beth supplying truth. */
mark.is-placeholder {
  background: repeating-linear-gradient(45deg, #ffb020 0 6px, #ffc75a 6px 12px);
  color: #201400;
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  font-style: normal;
  padding: 0.1em 0.4em;
  border-radius: 2px;
  overflow-wrap: anywhere;
}