/* Brieflings — Design Tokens
 * Source of truth: docs/company/design-tokens.md
 */

:root {
  color-scheme: light dark;

  /* === Color: substrate & text === */
  --bg-page: #FAF7F2;
  --bg-card: #FFFFFF;
  --bg-card-elevated: #FFFFFF;
  --text-body: #1A1816;
  --text-muted: #7C7770;
  --text-faint: #A8A29A;
  --border-subtle: #EDE7DE;

  /* === Color: cadence accents === */
  --accent-daily: #F4C9B6;
  --accent-daily-bg: #FAEAE0;
  --accent-weekly: #B6CDD4;
  --accent-weekly-bg: #E5EFF2;
  --accent-monthly: #C9B6CC;
  --accent-monthly-bg: #EDE3F0;

  /* === Color: functional === */
  --color-success: #7A9778;
  --color-error: #B05D5D;
  --color-warning: #C49855;

  /* === Type === */
  --font-display: 'Fraunces', 'Source Serif 4', Georgia, serif;
  --font-body-serif: 'Newsreader', 'Source Serif 4', Georgia, serif;
  --font-body-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.625rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.5rem;
  --text-6xl: 4.5rem;

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.8;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  /* === Space (4px base) === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* === Radius === */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* === Elevation === */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-modal: 0 4px 8px rgba(0, 0, 0, 0.08), 0 24px 48px rgba(0, 0, 0, 0.12);

  /* === Motion === */
  --duration-quick: 150ms;
  --duration-standard: 250ms;
  --duration-expressive: 400ms;
  --easing-default: cubic-bezier(0.32, 0.72, 0, 1);

  /* === Layout === */
  --container-narrow: 420px;
  --container-step: 520px;
  --container-content: 640px;
  --container-reading: 720px;
  --container-wide: 960px;
}

/* Dark mode — applied via system preference unless user opted into light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg-page: #1A1816;
    --bg-card: #252220;
    --bg-card-elevated: #2D2A28;
    --text-body: #EFE9E0;
    --text-muted: #9C9690;
    --text-faint: #6E6862;
    --border-subtle: #2D2A28;

    --accent-daily: #C97D5D;
    --accent-daily-bg: #3D2620;
    --accent-weekly: #5D8478;
    --accent-weekly-bg: #2A3833;
    --accent-monthly: #7D5D87;
    --accent-monthly-bg: #352838;

    --shadow-card: none;
    --shadow-card-hover: none;
    --shadow-modal: 0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.6);
  }
}

/* Manual override (overrides system preference both ways) */
[data-theme='dark'] {
  --bg-page: #1A1816;
  --bg-card: #252220;
  --bg-card-elevated: #2D2A28;
  --text-body: #EFE9E0;
  --text-muted: #9C9690;
  --text-faint: #6E6862;
  --border-subtle: #2D2A28;

  --accent-daily: #C97D5D;
  --accent-daily-bg: #3D2620;
  --accent-weekly: #5D8478;
  --accent-weekly-bg: #2A3833;
  --accent-monthly: #7D5D87;
  --accent-monthly-bg: #352838;

  --shadow-card: none;
  --shadow-card-hover: none;
  --shadow-modal: 0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.6);
}