/* Design tokens — canonical, hand-maintained source of truth for color,
   type, spacing, depth, motion. NOTE: src/config/design-tokens.ts is a
   separate TS copy used by server-side code; it is NOT auto-generated from
   this file (nor vice-versa). Keep the two in sync manually until a codegen
   step exists (audit L5). */
:root {
  /* ---------- Brand palette ---------- */
  --color-primary: #3a7d7b;
  --color-primary-light: #6fa6a3;
  --color-primary-lighter: #a8c5c2;
  --color-primary-dark: #2d5d5b;
  --color-accent: #1e3a5f;
  --color-accent-light: #3a5a7f;

  /* ---------- Semantic ---------- */
  --color-success: #16a34a;
  --color-success-light: #dcfce7;
  --color-warning: #d97706;
  --color-warning-light: #fef3c7;
  --color-danger: #dc2626;
  --color-danger-light: #fee2e2;
  --color-info: #2563eb;
  --color-info-light: #dbeafe;

  /* ---------- Surfaces ---------- */
  --color-bg: #f5f7f6;
  --color-bg-subtle: #eef1f0;
  --color-bg-elevated: #ffffff;
  --color-surface: #ffffff;
  --color-surface-hover: #f9fafb;
  --color-surface-sunken: #f3f4f6;
  --color-bg-dark: #0f1413;
  --color-surface-dark: #1c2120;

  /* ---------- Text ---------- */
  --color-text: #1f2937;
  --color-text-secondary: #4b5563;
  --color-text-muted: #6b7280;
  --color-text-subtle: #9ca3af;
  --color-text-inverse: #ffffff;
  --color-text-dark: #e8eded;

  /* ---------- Borders ---------- */
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-border-subtle: #f3f4f6;
  --color-focus: #3a7d7b;
  --color-focus-ring: rgba(58, 125, 123, 0.18);

  /* ---------- Type ---------- */
  --font-sans: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-mono: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-display: var(--font-sans);

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --leading-tight: 1.25;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------- Spacing (4px scale) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* legacy aliases — old naming still resolves */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-2xl: var(--space-12);
  --space-3xl: var(--space-16);

  --spacing-xs: var(--space-1);
  --spacing-sm: var(--space-2);
  --spacing-md: var(--space-4);
  --spacing-lg: var(--space-6);
  --spacing-xl: var(--space-8);
  --spacing-2xl: var(--space-12);
  --spacing-3xl: var(--space-16);

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

  /* ---------- Depth ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06);
  --shadow-focus: 0 0 0 4px var(--color-focus-ring);
  --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.06);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-reveal: 600ms;

  /* ---------- Layout ---------- */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  --sidebar-width: 248px;
  --header-height: 60px;
  --container-max: 1280px;
  --container-narrow: 720px;
}