/* LocalRock Design System Tokens
 * Based on brand guidelines (February 2026)
 */

:root {
  /* ── Color System (Light Mode Default) ────────────────── */

  /* Base palette */
  --color-background: #F2EDE4;        /* Cream */
  --color-surface: #F2EDE4;           /* Cream */
  --color-text-primary: #2B2B2B;      /* Charcoal */
  --color-text-emphasis: #1A1A1A;     /* Black */
  --color-text-secondary: #645C55;    /* Warm Gray */
  --color-structural: #D4CFC9;        /* Light Gray (borders only, not text) */

  /* Accent colors */
  --color-bronze: #6E5A3C;
  --color-sage: #5A6E5A;
  --color-slate-blue: #5A6B7A;
  --color-scarlet: #8B3A3A;
  --color-amber: #8B6B2A;

  /* Semantic aliases */
  --color-primary: var(--color-bronze);
  --color-success: var(--color-sage);
  --color-info: var(--color-slate-blue);
  --color-error: var(--color-scarlet);
  --color-warning: var(--color-amber);

  /* ── Typography ─────────────────────────────────────── */

  /* Font families per brand guidelines */
  --font-serif: 'Source Serif 4', Georgia, 'Noto Serif', serif;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  /* Type scale per brand guidelines */
  --font-size-display: 48px;
  --font-size-h1: 32px;
  --font-size-h2: 24px;
  --font-size-body: 17px;
  --font-size-caption: 13px;
  --font-size-metadata: 11px;

  /* Line heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* ── Spacing ────────────────────────────────────────── */

  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */

  /* ── Border Radius ──────────────────────────────────── */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────── */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* ── Transitions ────────────────────────────────────── */

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
}

/* Dark Mode (system preference — skipped if .light is set) */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    /* Base palette - inverted tonality, same warmth */
    --color-background: #1E1E1E;        /* Dark Base */
    --color-surface: #2D2D2D;           /* Dark Surface */
    --color-text-primary: #F2EDE4;      /* Cream (never pure white) */
    --color-text-emphasis: #F2EDE4;     /* Cream */
    --color-text-secondary: #9B9590;    /* Warm Gray */
    --color-structural: #3D3D3D;        /* Dark Gray */

    /* Accent colors - adjusted for dark mode */
    --color-bronze: #A8906A;
    --color-sage: #7F9B7F;
    --color-slate-blue: #7A92A8;
    --color-scarlet: #C47272;
    --color-amber: #C4A45A;
  }
}

/* Dark Mode (explicit class — forces dark regardless of system preference) */
:root.dark {
  /* Base palette - inverted tonality, same warmth */
  --color-background: #1E1E1E;        /* Dark Base */
  --color-surface: #2D2D2D;           /* Dark Surface */
  --color-text-primary: #F2EDE4;      /* Cream (never pure white) */
  --color-text-emphasis: #F2EDE4;     /* Cream */
  --color-text-secondary: #9B9590;    /* Warm Gray */
  --color-structural: #3D3D3D;        /* Dark Gray */

  /* Accent colors - adjusted for dark mode */
  --color-bronze: #A8906A;
  --color-sage: #7F9B7F;
  --color-slate-blue: #7A92A8;
  --color-scarlet: #C47272;
  --color-amber: #C4A45A;
}