/* ============================================
   Design Tokens — Dutch Medical Calculator
   Theme: Warm Cream + Terracotta (Claude-style)
   ============================================ */

:root {
  /* ---- Color Palette ---- */
  /* Backgrounds */
  --color-bg-primary: #F5F0E8;
  --color-bg-secondary: #EDE8DF;
  --color-bg-surface: #FDFBF7;
  --color-bg-elevated: #FFFFFF;
  --color-bg-hover: #E8E2D8;
  --color-bg-input: #FDFBF7;

  /* Accent — Terracotta Orange */
  --color-accent: #C4553D;
  --color-accent-hover: #B04A34;
  --color-accent-light: #E8A898;
  --color-accent-subtle: rgba(196, 85, 61, 0.08);
  --color-accent-text: #C4553D;

  /* Text */
  --color-text-primary: #2D2A26;
  --color-text-secondary: #6B6560;
  --color-text-tertiary: #9A948D;
  --color-text-inverse: #FDFBF7;
  --color-text-on-accent: #FFFFFF;

  /* Borders */
  --color-border: #DDD8D0;
  --color-border-light: #E8E3DB;
  --color-border-focus: #C4553D;

  /* Severity / Risk Colors */
  --color-severity-low: #4A8C5C;
  --color-severity-low-bg: rgba(74, 140, 92, 0.08);
  --color-severity-low-border: rgba(74, 140, 92, 0.25);

  --color-severity-moderate: #B8860B;
  --color-severity-moderate-bg: rgba(184, 134, 11, 0.08);
  --color-severity-moderate-border: rgba(184, 134, 11, 0.25);

  --color-severity-high: #D4714E;
  --color-severity-high-bg: rgba(212, 113, 78, 0.08);
  --color-severity-high-border: rgba(212, 113, 78, 0.25);

  --color-severity-very-high: #B5332E;
  --color-severity-very-high-bg: rgba(181, 51, 46, 0.08);
  --color-severity-very-high-border: rgba(181, 51, 46, 0.25);

  /* ---- Typography ---- */
  --font-serif: 'Source Serif 4', 'Georgia', 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-md: 1rem;        /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.375rem;    /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: 3rem;       /* 48px */

  /* Font Weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line Heights */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.12em;

  /* ---- Spacing ---- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* ---- Layout ---- */
  --max-width: 1200px;
  --max-width-narrow: 800px;
  --sidebar-width: 280px;
  --header-height: 64px;

  /* ---- Borders ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(45, 42, 38, 0.04);
  --shadow-md: 0 2px 8px rgba(45, 42, 38, 0.06), 0 1px 2px rgba(45, 42, 38, 0.04);
  --shadow-lg: 0 4px 16px rgba(45, 42, 38, 0.08), 0 2px 4px rgba(45, 42, 38, 0.04);
  --shadow-xl: 0 8px 32px rgba(45, 42, 38, 0.10), 0 4px 8px rgba(45, 42, 38, 0.04);

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}