/* ============================================================
   Design tokens — professional light theme. Inter everywhere.
   Single source of truth; change a value here, the whole app follows.
   ============================================================ */
:root {
  /* --- Surfaces (warm-tinted, OKLCH) --- */
  --color-canvas: oklch(0.984 0.009 72);   /* page background behind cards */
  --color-bg: oklch(0.999 0.003 72);       /* base */
  --color-surface: oklch(0.999 0.003 72);  /* cards */
  --color-surface-2: oklch(0.975 0.010 70);/* subtle inset panels */
  --color-surface-3: oklch(0.961 0.014 68);/* hover / table header */

  /* --- Borders --- */
  --color-border: oklch(0.912 0.012 66);
  --color-border-strong: oklch(0.872 0.015 64);
  --color-border-hover: oklch(0.815 0.02 60);

  /* --- Text (warm ink) --- */
  --color-text-primary: oklch(0.27 0.02 45);
  --color-text-secondary: oklch(0.50 0.018 50);
  --color-text-muted: oklch(0.655 0.02 55);

  /* --- Brand accent (coral, unified with marketing) --- */
  --color-accent: oklch(0.66 0.17 36);
  --color-accent-dim: oklch(0.565 0.16 34);
  --color-accent-soft: oklch(0.95 0.045 50);
  --color-accent-border: oklch(0.88 0.06 48);
  --color-accent-ink: #FFFFFF;

  /* --- Status --- */
  --color-success: #15803D;
  --color-success-soft: #E7F6ED;
  --color-error: #DC2626;
  --color-error-soft: #FCEDED;
  --color-warning: #B45309;
  --color-warning-soft: #FBF1E3;
  --color-info: #1D4ED8;
  --color-info-soft: #E9F0FE;

  /* --- Typography: Poppins display + Inter body (mixture, app-wide) --- */
  --font-display: "Poppins", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "Inter", ui-monospace, "SF Mono", monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra: 800;

  /* Fluid type scale (clamp = responsive without media queries) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.85rem;
  --fs-base: 0.95rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  --fs-2xl: clamp(1.4rem, 1.2rem + 0.9vw, 1.7rem);
  --fs-3xl: clamp(2.4rem, 1.4rem + 4.6vw, 4rem);

  /* --- Spacing (4px base) --- */
  --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;
  --space-24: 96px;

  /* --- Radius --- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* --- Shadows (soft, layered — professional elevation) --- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 41, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 41, 0.06), 0 1px 2px rgba(15, 23, 41, 0.04);
  --shadow: 0 4px 14px rgba(15, 23, 41, 0.06), 0 2px 4px rgba(15, 23, 41, 0.04);
  --shadow-md: 0 10px 28px rgba(15, 23, 41, 0.08), 0 4px 8px rgba(15, 23, 41, 0.04);
  --shadow-lg: 0 22px 48px rgba(15, 23, 41, 0.14);
  --ring-accent: 0 0 0 4px var(--color-accent-soft);

  /* --- Motion --- */
  --t-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --t: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-panel: 280ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Layout --- */
  --maxw: 1200px;
  --maxw-narrow: 760px;
  --maxw-wide: 1360px;
  --header-h: 68px;
  --sidebar-w: 248px;

  /* --- Responsive breakpoints (mirrored in app.js screen store) --- */
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;
}