/*
 * find-a-film — design tokens v0.3 "Blue Hour"
 *
 * Source of truth: design-system.md v0.1 (Blue Hour · Cinematic
 * Minimalism · Light + Dark). A FORK of Civic Ink v1.5, not a branch —
 * structural rules (8pt grid, borders, radii, a11y) carry over;
 * palette, typography, and the third accent role (Peach) are its own.
 * Supersedes v0.2 (Civic Ink adaptation, 2026-07-08).
 *
 * Architecture, two layers (unchanged from v0.2):
 *   1. PRIMITIVES — Blue Hour values, verbatim from design-system.md.
 *      Do not edit values here; change design-system.md, then re-sync.
 *   2. THEME — --ff-* semantic aliases. The app's stylesheet references
 *      ONLY this layer. Themes may remap; they may not invent values.
 *
 * Adaptation decisions (2026-07-10):
 *   - Three accents, three jobs: Golden = action/selected, Periwinkle =
 *     links/info, Peach = mood/recommendation. Never two on one element.
 *   - Result cards take the mood-card pattern: warm-tinted surface,
 *     4px Peach left border, no outer border.
 *   - Service badges stay NEUTRAL tags (thin ink border): periwinkle
 *     tags inside a peach card would put two accents on one component.
 *   - Form focus = Periwinkle (per Form Elements); button/link focus =
 *     Golden (per Interaction States).
 *   - Dark mode is primary — this is a film app, it lives at night.
 *     Light :root + dark override matches the spec's own CSS blocks.
 */

:root {
  /* ============ LAYER 1 — Blue Hour primitives ============ */

  /* Color — light mode "Screen" */
  --color-ink:         #0E1228;   /* Twilight */
  --color-paper:       #F3F1F6;   /* Screen */
  --color-golden:      #C49A1C;
  --color-periwinkle:  #4A55A0;
  --color-peach:       #B07060;
  --color-rule:        #D8D5E2;   /* Haze */
  --color-muted:       #555775;   /* Dusk */
  --color-alarm:       #DC2626;
  --color-alarm-bg:    #FDF5F5;
  --color-mood-surface:#F5EEEB;   /* warm-tinted card surface (light) */

  /* Type scale — display (Syne) */
  --text-display-xl:  56px;   /* ceiling — Syne runs large */
  --text-display-lg:  40px;
  --text-display-md:  28px;

  /* Type scale — body (Figtree) */
  --text-body-xl:     24px;
  --text-body-lg:     20px;
  --text-body-md:     16px;
  --text-body-sm:     14px;
  --text-body-xs:     12px;

  /* Line height */
  --leading-tight:    1.08;
  --leading-normal:   1.5;
  --leading-loose:    1.75;

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.15em;

  /* Font stacks */
  --font-display: 'Syne', 'Helvetica Neue', 'Helvetica', sans-serif;
  --font-body:    'Figtree', 'Helvetica Neue', 'Helvetica', sans-serif;
  --font-mono:    'Courier New', 'Courier', monospace;

  /* Spacing — 8pt grid */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  96px;
  --space-9: 128px;

  /* Layout */
  --container-narrow:  720px;

  /* Borders & rules */
  --border-thin:          0.5px solid var(--color-ink);
  --border-mid:             1px solid var(--color-ink);
  --border-heavy:           2px solid var(--color-ink);
  --border-rule:            1px solid var(--color-rule);
  --border-accent-golden:   4px solid var(--color-golden);
  --border-accent-peri:     4px solid var(--color-periwinkle);
  --border-accent-peach:    4px solid var(--color-peach);

  /* Border radius — two settings only: subtle or pill */
  --radius-sm:   4px;
  --radius-pill: 100px;

  /* Motion */
  --duration-fast:  100ms;
  --duration-mid:   200ms;
  --duration-slow:  350ms;
  --ease-sharp:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
}

/* Dark mode "Twilight" — the primary mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-ink:         #E8E4F0;   /* Off-white */
    --color-paper:       #0E1228;   /* Twilight */
    --color-golden:      #DBAA20;
    --color-periwinkle:  #7B8FD4;
    --color-peach:       #D4907A;
    --color-rule:        #252845;   /* Deep Blue */
    --color-muted:       #8B8DB0;   /* Dusk (dark value — do not swap) */
    --color-alarm:       #F87171;
    --color-alarm-bg:    #1C0A0A;
    --color-mood-surface:#2A1E24;   /* warm-tinted card surface (dark) */
  }
}

:root {
  /* ============ LAYER 2 — find-a-film theme (--ff-*) ============
     The app's stylesheet uses these and only these. */

  /* Surfaces */
  --ff-page:           var(--color-paper);
  --ff-surface:        var(--color-paper);
  --ff-rule:           var(--border-rule);

  /* Text */
  --ff-text:           var(--color-ink);
  --ff-text-soft:      var(--color-muted);

  /* Inputs */
  --ff-input-border:   var(--border-mid);

  /* Three accents, three jobs */
  --ff-action:         var(--color-golden);      /* CTAs, selected states */
  --ff-link:           var(--color-periwinkle);  /* links, info */
  --ff-mood:           var(--color-peach);       /* feeling, recommendations */

  /* Button — .btn-primary pattern: ink at rest, Golden on hover */
  --ff-btn-bg:         var(--color-ink);
  --ff-btn-ink:        var(--color-paper);
  --ff-btn-border:     var(--border-mid);
  --ff-btn-hover-bg:   var(--color-golden);
  --ff-btn-hover-ink:  #0E1228;                  /* Ink-on-Golden in both modes */

  /* Selected checkboxes — Golden (active state) */
  --ff-selected:       var(--color-golden);

  /* Focus — Golden for buttons/links, Periwinkle for form fields */
  --ff-focus-ring:      2px solid var(--color-golden);
  --ff-focus-ring-form: 2px solid var(--color-periwinkle);
  --ff-focus-offset:    2px;

  /* Mood card — the app's primary content surface */
  --ff-card-surface:   var(--color-mood-surface);
  --ff-card-accent:    var(--border-accent-peach);

  /* Errors — Alarm is semantic: errors only */
  --ff-error:          var(--color-alarm);
  --ff-error-bg:       var(--color-alarm-bg);

  /* Type roles */
  --ff-body-font:      var(--font-body);
  --ff-display-font:   var(--font-display);
  --ff-h1-size:        var(--text-display-lg);   /* 40px; 56px at ≥768px */
  --ff-h1-size-wide:   var(--text-display-xl);
  --ff-h1-weight:      700;                      /* Syne display weight — never 800 */
  --ff-h1-leading:     var(--leading-tight);
  --ff-h1-tracking:    var(--tracking-tight);

  --ff-prompt-size:    var(--text-display-md);   /* beat prompts, section heads — Syne */
  --ff-title-size:     var(--text-body-lg);      /* film titles — Figtree */
  --ff-body-size:      var(--text-body-md);
  --ff-meta-size:      var(--text-body-sm);
  --ff-label-size:     var(--text-body-xs);      /* tags, eyebrows */
  --ff-label-tracking: var(--tracking-wide);
  --ff-eyebrow-tracking: var(--tracking-wider);
  --ff-body-leading:   var(--leading-normal);

  /* Shape */
  --ff-radius:         var(--radius-sm);         /* 4px; pill is the only other setting */
  --ff-radius-badge:   var(--radius-sm);         /* tags are rectangles; pills are for mood chips */

  /* Rhythm */
  --ff-gap-hairline:   var(--space-1);
  --ff-gap-tight:      var(--space-2);
  --ff-gap:            var(--space-3);
  --ff-pad-card:       var(--space-4);
  --ff-gap-component:  var(--space-5);
  --ff-gap-beat:       var(--space-6);
  --ff-gap-section:    var(--space-7);
  --ff-page-top:       var(--space-6);

  /* Measure */
  --ff-measure:        var(--container-narrow);

  /* A11y floor — not on the 8pt grid; it's the WCAG touch-target minimum */
  --ff-touch-min:      44px;
}