/* Dropdate design tokens
   Brand system as CSS custom properties. Imported before any page so every
   surface inherits it. Dark-mode first. Rose is reserved, semantically, for the
   Drop Date and anything threatening it: if something on screen is rose, the
   date is at risk. Do not use rose for decoration. */

:root {
  /* ---- canvas (ink) ---- */
  --ink-900: #0B0E14;   /* app background */
  --ink-850: #0E121B;
  --ink-800: #11151F;   /* raised surface / header */
  --ink-750: #161D2B;   /* card */
  --ink-700: #1E2430;   /* card hover / inputs */
  --ink-600: #262F44;   /* hairline on dark */
  --ink-500: #3A4150;   /* muted border */

  /* ---- text ---- */
  --text-hi: #EEF1F6;   /* primary */
  --text-mid: #AAB3C5;  /* secondary */
  --text-lo: #6B7486;   /* tertiary / captions */
  --text-inverse: #0B0E14;

  /* ---- the reserved signal ---- */
  --rose: #F43F5E;      /* the Drop Date, and risk */
  --rose-dim: #B22B41;
  --rose-glow: rgba(244, 63, 94, 0.45);

  /* ---- work-phase accents (semantic, per v3 2.2) ---- */
  --phase-creative: #8B5CF6;  /* violet  - writing / recording */
  --phase-mixing:   #22D3EE;  /* cyan    - mixing */
  --phase-master:   #F59E0B;  /* amber   - mastering */
  --phase-promo:    #34D399;  /* green   - promo / distribution */

  /* status (distinct from phase accents) */
  --ok: #34D399;
  --warn: #F59E0B;
  --bad: var(--rose);

  /* ---- typography ---- */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* bold geometric numerals, spaced for stage-light legibility on a phone */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3.25rem;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.15;
  --lh-normal: 1.5;

  /* ---- spacing (4px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;
  --sp-10: 4rem;

  /* ---- radii ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---- elevation ---- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.55);

  /* ---- layout ---- */
  --rail-w: 232px;       /* desktop side nav */
  --header-h: 56px;
  --bottombar-h: 60px;   /* mobile */
  --content-max: 1200px;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  /* z-index scale */
  --z-nav: 50;
  --z-drawer: 80;
  --z-toast: 100;

  color-scheme: dark;
}

/* phase -> color helper, used by lane rendering and tags */
[data-phase="creative"] { --phase: var(--phase-creative); }
[data-phase="mixing"]   { --phase: var(--phase-mixing); }
[data-phase="master"]   { --phase: var(--phase-master); }
[data-phase="promo"]    { --phase: var(--phase-promo); }