/* =============================================================================
 * Connecting Covers — Design Tokens (single source of truth)
 * Mirrors development/phase-2/01-design-system.md §1–§3 exactly.
 * Nothing in base.css / components.css / pages should hardcode a value that
 * exists here. If a value is missing, add it here first.
 * ========================================================================== */

:root {
  /* ---- §1 Color · Surfaces (dark, layered; higher = closer to viewer) ---- */
  --bg-page: #0a0a12;          /* page background, top nav */
  --bg-footer: #060610;        /* footer, deepest recess */
  --surface-1: #12122a;        /* default card / panel surface */
  --surface-2: #1a1a2e;        /* raised card, list rows, badges */
  --surface-sunken: #0d0d1a;   /* inset wells (print preview interior) */

  /* Hairline borders */
  --border-hairline: rgba(255, 255, 255, 0.07);  /* default surface border */
  --divider: rgba(255, 255, 255, 0.06);          /* section dividers */

  /* ---- §1 Accent — crimson (the one UI accent) ---- */
  --accent: #E24B4A;           /* active nav, CTAs, eyebrow labels, alerts, bars */
  --accent-strong: #A32D2D;    /* pressed / darker accent */
  --accent-on-dark: #F0997B;   /* accent-tinted text on dark surfaces */

  /* ---- §1 Secondary — purple (structure, ranks, brand tint) ---- */
  --purple-600: #534AB7;       /* borders, structural strokes */
  --purple-800: #3C3489;       /* filled chips, avatar fills */
  --purple-900: #26215C;       /* deep avatar / badge fills */
  --purple-text: #AFA9EC;      /* purple-tinted text on dark */
  --purple-400: #7F77DD;       /* brighter purple accents (badges) */

  /* ---- §1 Semantic ---- */
  --success: #1D9E75;          /* owned / complete / added */
  --success-deep: #0F6E56;     /* success badge fill */
  --success-text: #9FE1CB;     /* success text on dark */
  --warn: #BA7517;             /* want-list "watching" */
  --warn-text: #EF9F27;        /* warn text on dark */
  --muted: #888780;            /* missing / inactive labels */
  --muted-line: #444441;       /* inactive accent bars, placeholders */

  /* ---- §1 Cover-art gradients (decorative placeholders, 135°) ---- */
  --grad-a: linear-gradient(135deg, #3C3489 0%, #E24B4A 100%);
  --grad-b: linear-gradient(135deg, #0F6E56 0%, #534AB7 100%);
  --grad-c: linear-gradient(135deg, #993C1D 0%, #3C3489 100%);
  --grad-d: linear-gradient(135deg, #534AB7 0%, #26215C 100%);
  --grad-e: linear-gradient(135deg, #993C1D 0%, #E24B4A 100%);
  /* Global dashboard completion fill (crimson → purple) */
  --grad-completion: linear-gradient(90deg, #E24B4A 0%, #534AB7 100%);

  /* ---- §2 Typography ---- */
  --font-sans: "Sen", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;

  --fs-hero: 26px;     --fw-hero: 700;       /* set / feature titles */
  --fs-section: 16px;  --fw-section: 600;    /* section headings */
  --fs-card: 13px;     --fw-card: 600;       /* cover / set names (12–13px) */
  --fs-meta: 11px;     --fw-meta: 400;       /* dates, counts, descriptions (10–11px) */
  --fs-stat: 28px;     --fw-stat: 700;       /* dashboard metric values */
  --fs-eyebrow: 11px;  --fw-eyebrow: 600;    /* UPPERCASE eyebrow labels */
  --eyebrow-tracking: 2.5px;                 /* letter-spacing 2–3px */

  /* Muted meta is "the same text, dimmed" — opacity, not a separate gray */
  --meta-opacity: 0.45;        /* 40–50% */

  /* ---- §3 Spacing & layout ---- */
  --gutter: 32px;              /* content left/right gutter */
  --content-min: 680px;
  --content-max: 1200px;
  --section-gap: 24px;         /* breathing room above next eyebrow */

  --radius-row: 6px;          /* list rows */
  --radius-card: 8px;         /* standard card */
  --radius-lg: 12px;          /* large containers */
  --radius-pill: 999px;

  --card-pad: 14px;           /* card internal padding (12–16px) */

  --grid-min: 160px;          /* cover grid: auto-fit minmax(160px, 1fr) */
  --grid-gap: 16px;

  /* ---- §4 Accent bar pattern ---- */
  --accent-bar-width: 4px;

  /* ---- §5 Motion ---- */
  --motion-stagger: 40ms;
  --motion-fast: 150ms;       /* card hover */
  --motion-reveal: 300ms;     /* page-load fade-up */
  --motion-bar: 600ms;        /* progress bar fill */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --lift-scale: 1.015;        /* card hover lift */
  --press-scale: 0.98;        /* button active press */

  /* Focus ring (accessibility — visible crimson ring everywhere) */
  --focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--accent);

  /* Per-set derived accent. Pages/components override this inline from the set's
   * art-derived color; it drives that set's accent bar, progress bar, and dots —
   * never the global crimson chrome. Defaults to crimson. */
  --set-accent: var(--accent);
}

/* Responsive gutter — 32px is too wide on phones (it eats ~20% of a 320px screen and
 * pushes the topnav off-screen). Shrink it systemically so every .cl-content benefits. */
@media (max-width: 640px) {
  :root { --gutter: 24px; }
}
@media (max-width: 420px) {
  :root { --gutter: 16px; }
}