/* ================================================
   Design Tokens & Fonts
   ================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@700&display=swap');

:root {
  /* Typography */
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;

  /* Type scale */
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: 1.875rem;
  --step-4: 2.375rem;
  --step-5: clamp(2.75rem, 5vw, 3.5rem);

  /* Weight */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Container widths */
  --container-narrow: 680px;
  --container-default: 1100px;
  --container-wide: 1200px;

  /* Radii */
  --radius-sm: 0.45rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-2xl: 2.25rem;

  /* Elevation */
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 8px 18px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 12px 30px rgba(15, 46, 35, 0.12);
  --shadow-lg: 0 18px 36px rgba(15, 46, 35, 0.18);

  /* Palette */
  --brand-900: #0A2118;
  --brand-800: #0D2A1F;
  --brand-700: #123B2D;
  --brand-500: #2d8a4f;
  --brand-300: #5FD68A;
  --brand-100: #E5F7EB;
  --brand-bright: var(--brand-300);

  --neutral-000: #ffffff;
  --neutral-050: #f8f4ee;
  --neutral-100: #f3ede4;
  --neutral-200: #e8dfd3;
  --neutral-500: #807264;
  --neutral-700: #3a3a3a;

  --accent-gold: #d4af37;
  --accent-amber: #e8a05d;

  /* Semantic alias */
  --color-background: var(--neutral-050);
  --color-surface: var(--neutral-000);
  --color-surface-muted: #eff2f0;
  --color-surface-inverse: var(--brand-800);
  --color-text: var(--brand-800);
  --color-text-muted: #5a6c64;
  --color-border: color-mix(in srgb, var(--brand-700) 10%, transparent);
  --color-highlight: var(--brand-500);
  --color-highlight-soft: var(--brand-300);
  --color-warning: var(--accent-amber);
  --text-highlight-bg: color-mix(in srgb, var(--color-highlight-soft) 40%, transparent);
  --text-highlight-soft-bg: color-mix(in srgb, var(--color-highlight) 18%, transparent);

  /* Settings panel */
  --settings-bg: var(--neutral-050);
  --settings-card: var(--neutral-000);
  --settings-border: color-mix(in srgb, var(--brand-700) 10%, transparent);
  --settings-divider: color-mix(in srgb, var(--brand-700) 6%, transparent);
  --settings-track: color-mix(in srgb, var(--brand-700) 8%, transparent);
  --settings-thumb-bg: var(--settings-card);
  --settings-option-active-fg: #ffffff;
  --settings-option-active-check-bg: rgba(255,255,255,0.2);
  --settings-danger: #c62828;
  --settings-danger-text: #ffffff;

  --gradient-brand: linear-gradient(135deg, var(--brand-700), var(--brand-500));
  --gradient-contrast: linear-gradient(135deg, #ffffff, var(--brand-300));
}

body.is-dark {
  --color-background: var(--brand-800);
  --color-surface: color-mix(in srgb, var(--brand-700) 80%, black 20%);
  --color-surface-muted: color-mix(in srgb, var(--brand-700) 60%, black 40%);
  --color-text: #f2f2f2;
  --color-text-muted: color-mix(in srgb, #f2f2f2 60%, rgba(255,255,255,0) 40%);
  --color-border: color-mix(in srgb, rgba(255,255,255,0.6) 40%, transparent);
  --gradient-brand: linear-gradient(135deg, var(--brand-300), var(--brand-500));
  --text-highlight-bg: color-mix(in srgb, rgba(255,255,255,0.28) 32%, transparent);
  --text-highlight-soft-bg: color-mix(in srgb, var(--color-highlight) 28%, transparent);
}

:root[data-theme="dark"] {
  --settings-bg: color-mix(in srgb, var(--brand-900) 88%, black 12%);
  --settings-card: color-mix(in srgb, var(--brand-800) 80%, black 20%);
  --settings-border: color-mix(in srgb, rgba(255,255,255,0.35) 32%, transparent);
  --settings-divider: color-mix(in srgb, rgba(255,255,255,0.18) 28%, transparent);
  --settings-track: color-mix(in srgb, rgba(255,255,255,0.25) 28%, transparent);
  --settings-thumb-bg: var(--settings-card);
  --settings-option-active-fg: var(--brand-900);
  --settings-option-active-check-bg: rgba(0,0,0,0.25);
  --settings-danger: #f87171;
  --settings-danger-text: #1f2937;
}

:root[data-accent="green"] {
  --brand-900: #0A2118;
  --brand-800: #0D2A1F;
  --brand-700: #123B2D;
  --brand-500: #2d8a4f;
  --brand-300: #5FD68A;
  --brand-100: #E5F7EB;
  --color-highlight: var(--brand-500);
  --color-highlight-soft: var(--brand-300);
  --gradient-brand: linear-gradient(135deg, var(--brand-700), var(--brand-500));
  --text-highlight-bg: color-mix(in srgb, var(--brand-300) 45%, transparent);
  --text-highlight-soft-bg: color-mix(in srgb, var(--brand-500) 22%, transparent);
}

:root[data-accent="blue"] {
  --brand-900: #0b1b3a;
  --brand-800: #10254d;
  --brand-700: #1f3b71;
  --brand-500: #2563eb;
  --brand-300: #60a5fa;
  --brand-100: #dbeafe;
  --brand-bright: var(--brand-300);
  --color-highlight: #2563eb;
  --color-highlight-soft: #93c5fd;
  --color-border: color-mix(in srgb, var(--brand-700) 12%, transparent);
  --gradient-brand: linear-gradient(135deg, #1f3b71, #2563eb);
  --text-highlight-bg: color-mix(in srgb, #93c5fd 45%, transparent);
  --text-highlight-soft-bg: color-mix(in srgb, #2563eb 22%, transparent);
}

:root[data-accent="red"] {
  --brand-900: #2f0a0a;
  --brand-800: #3f1011;
  --brand-700: #7f1d1d;
  --brand-500: #dc2626;
  --brand-300: #f87171;
  --brand-100: #fee2e2;
  --brand-bright: var(--brand-300);
  --color-highlight: #dc2626;
  --color-highlight-soft: #fca5a5;
  --color-border: color-mix(in srgb, var(--brand-700) 12%, transparent);
  --gradient-brand: linear-gradient(135deg, #7f1d1d, #dc2626);
  --text-highlight-bg: color-mix(in srgb, #fca5a5 45%, transparent);
  --text-highlight-soft-bg: color-mix(in srgb, #dc2626 22%, transparent);
}