/**
 * Design tokens — DS-002 Color System, DS-003 Typography, DS-004 Layout.
 * Rule (DS-002): components must consume these variables only, never
 * hardcoded colors.
 */

:root {
  /* Primary — brand blue */
  --color-primary-50:  #eef2ff;
  --color-primary-100: #dde6ff;
  --color-primary-200: #b9ccff;
  --color-primary-300: #8fa8ff;
  --color-primary-400: #5f7dff;
  --color-primary-500: #3158ff;
  --color-primary-600: #2542db;
  --color-primary-700: #1c34b0;
  --color-primary-800: #172a8c;
  --color-primary-900: #131f66;

  /* Secondary — growth green */
  --color-secondary-50:  #ecfdf5;
  --color-secondary-100: #d1fae5;
  --color-secondary-200: #a7f3d0;
  --color-secondary-300: #6ee7b7;
  --color-secondary-400: #34d399;
  --color-secondary-500: #10b981;
  --color-secondary-600: #059669;
  --color-secondary-700: #047857;
  --color-secondary-800: #065f46;
  --color-secondary-900: #064e3b;

  /* Neutral */
  --color-neutral-50:  #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;

  /* Semantic */
  --color-success: var(--color-secondary-500);
  --color-warning: #f59e0b;
  --color-danger:  #ef4444;
  --color-info:    #3b82f6;

  /* Surface & text */
  --color-bg:        #ffffff;
  --color-bg-alt:     var(--color-neutral-50);
  --color-text:       var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-600);
  --color-border:     var(--color-neutral-200);

  /* Typography — DS-003 */
  --font-family-base: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --font-size-h1: 3rem;      /* 48px */
  --line-height-h1: 3.5rem;  /* 56px */
  --font-size-h2: 2.5rem;    /* 40px */
  --line-height-h2: 3rem;    /* 48px */
  --font-size-h3: 2rem;      /* 32px */
  --line-height-h3: 2.5rem;  /* 40px */
  --font-size-h4: 1.5rem;    /* 24px */
  --line-height-h4: 2rem;    /* 32px */
  --font-size-body: 1rem;       /* 16px */
  --line-height-body: 1.75rem;  /* 28px */
  --font-size-small: 0.875rem;  /* 14px */
  --line-height-small: 1.375rem;/* 22px */
  --font-size-caption: 0.75rem; /* 12px */
  --line-height-caption: 1.125rem; /* 18px */

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Layout — DS-004 */
  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1140px;
  --container-xl: 1320px;

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

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.12);
}