/*
 * Lyrically — design tokens (canonical source for web properties)
 * ----------------------------------------------------------------
 * Extracted from the app's frontend/src/index.css so the static site and docs
 * use the EXACT same palette, type, and rhythm as the desktop app.
 *
 * This file is the source of truth for the site/docs. It is COPIED into the
 * deployable site at build time (see site/README.md) — don't hand-edit the copy.
 * The app itself still defines these in frontend/src/index.css; keep the two in
 * sync until the app imports from here (a future cleanup — see STYLE_GUIDE.md).
 */
:root {
  /* Surfaces — the dark "night" ladder (darkest → raised) */
  --lyr-ink: #0B0C10;            /* app background */
  --lyr-ink-2: #0D0E14;
  --lyr-surface: #15161C;        /* cards / panels */
  --lyr-surface-raised: #1E1F29; /* chips, inputs, toolbars */
  --lyr-border: #282936;
  --lyr-border-soft: #1F2029;

  /* Text — the legibility ladder (primary → muted → faint) */
  --lyr-text: #EAEAE5;
  --lyr-text-2: #8A8A99;
  --lyr-text-3: #5C5C6B;

  /* Brand accent — amber (the one warm color on the night) */
  --lyr-amber: #E07A2A;
  --lyr-amber-hi: #F08D3C;       /* hover / emphasis */
  --lyr-amber-glow: rgba(224, 122, 42, 0.15);
  --lyr-amber-glow-strong: rgba(224, 122, 42, 0.28);

  /* Semantic states */
  --lyr-accepted: #B3E0B3;                       /* accepted revision text */
  --lyr-accepted-bg: rgba(120, 200, 120, 0.10);
  --lyr-destructive: #D92B2B;                    /* ≈ hsl(0 70% 50%) */
  --lyr-ghost: #6E6E7A;                          /* prior-text "ghost" */

  /* Typography */
  --lyr-font-ui: 'Figtree', system-ui, -apple-system, sans-serif;  /* chrome/UI */
  --lyr-font-prose: 'EB Garamond', Georgia, serif;                 /* lyrics/prose */
  --lyr-prose-size: 1.25rem;
  --lyr-prose-leading: 1.85;
  --lyr-prose-tracking: 0.01em;

  /* Radii */
  --lyr-radius: 0.75rem;   /* 12px — cards */
  --lyr-radius-input: 8px;
  --lyr-radius-tag: 4px;
  --lyr-radius-pill: 999px; /* buttons, chips */

  /* Motion (no animation should be essential — see reduced-motion note) */
  --lyr-ease: ease;
  --lyr-dur-fast: 180ms;
  --lyr-dur: 220ms;
  --lyr-dur-slow: 280ms;

  /* Elevation */
  --lyr-shadow-pop: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* Honor user motion preferences — applies anywhere this token file is loaded. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --lyr-dur-fast: 0ms;
    --lyr-dur: 0ms;
    --lyr-dur-slow: 0ms;
  }
}