/**
 * VIRIX Design System 1.0 — Design Tokens
 * Single source of truth. No hardcoded values in components.
 * Prefix: --vds-*
 */
:root {
  /* ——— Color · Brand ——— */
  --vds-color-primary-50: #eef7f1;
  --vds-color-primary-100: #d5ecdd;
  --vds-color-primary-200: #aed9bd;
  --vds-color-primary-300: #7bbf94;
  --vds-color-primary-400: #4aa06c;
  --vds-color-primary-500: #16844b;
  --vds-color-primary-600: #0f6b3c;
  --vds-color-primary-700: #0a5330;
  --vds-color-primary-800: #073c2b;
  --vds-color-primary-900: #04291e;

  --vds-color-secondary-500: #1d4f63;
  --vds-color-secondary-600: #163d4d;
  --vds-color-secondary-700: #102c38;

  /* ——— Color · Semantic ——— */
  --vds-color-success-50: #eaf7ef;
  --vds-color-success-500: #1f7a45;
  --vds-color-success-600: #176338;
  --vds-color-success-700: #104c2a;

  --vds-color-warning-50: #fbf3e6;
  --vds-color-warning-500: #c66b28;
  --vds-color-warning-600: #a3551c;
  --vds-color-warning-700: #7f4014;

  --vds-color-danger-50: #f9ecec;
  --vds-color-danger-500: #af4543;
  --vds-color-danger-600: #913634;
  --vds-color-danger-700: #722928;

  --vds-color-info-50: #eaf3f8;
  --vds-color-info-500: #2a6f8f;
  --vds-color-info-600: #1f5772;
  --vds-color-info-700: #164055;

  /* ——— Color · Neutral ——— */
  --vds-color-neutral-0: #ffffff;
  --vds-color-neutral-50: #f5f8f4;
  --vds-color-neutral-100: #eef3ee;
  --vds-color-neutral-200: #dce8df;
  --vds-color-neutral-300: #c5d5ca;
  --vds-color-neutral-400: #9aafa2;
  --vds-color-neutral-500: #6f8477;
  --vds-color-neutral-600: #52685e;
  --vds-color-neutral-700: #3a4d44;
  --vds-color-neutral-800: #24352d;
  --vds-color-neutral-900: #10271e;

  /* ——— Semantic aliases ——— */
  --vds-color-bg: #e9f2ea;
  --vds-color-bg-elevated: var(--vds-color-neutral-50);
  --vds-color-surface: var(--vds-color-neutral-0);
  --vds-color-surface-muted: var(--vds-color-neutral-100);
  --vds-color-border: var(--vds-color-neutral-200);
  --vds-color-border-strong: var(--vds-color-neutral-300);
  --vds-color-text: var(--vds-color-neutral-900);
  --vds-color-text-muted: var(--vds-color-neutral-600);
  --vds-color-text-inverse: var(--vds-color-neutral-0);
  --vds-color-focus: var(--vds-color-primary-500);
  --vds-color-overlay: rgba(8, 32, 22, 0.48);

  /* Status (shared across all modules) */
  --vds-status-new: var(--vds-color-info-500);
  --vds-status-progress: var(--vds-color-warning-500);
  --vds-status-done: var(--vds-color-success-500);
  --vds-status-blocked: var(--vds-color-danger-500);
  --vds-status-idle: var(--vds-color-neutral-500);

  /* ——— Typography ——— */
  --vds-font-display: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --vds-font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --vds-font-mono: "IBM Plex Mono", "Consolas", monospace;

  --vds-fs-h1: clamp(2rem, 2.4vw, 2.75rem);
  --vds-fs-h2: clamp(1.5rem, 1.8vw, 2rem);
  --vds-fs-h3: 1.375rem;
  --vds-fs-h4: 1.125rem;
  --vds-fs-subtitle: 1.0625rem;
  --vds-fs-body: 0.9375rem;
  --vds-fs-caption: 0.8125rem;
  --vds-fs-label: 0.75rem;
  --vds-fs-button: 0.875rem;

  --vds-lh-tight: 1.2;
  --vds-lh-body: 1.5;
  --vds-lh-relaxed: 1.65;

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

  --vds-tracking-label: 0.06em;

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

  /* ——— Grid ——— */
  --vds-container-sm: 640px;
  --vds-container-md: 960px;
  --vds-container-lg: 1200px;
  --vds-container-xl: 1440px;
  --vds-grid-columns: 12;
  --vds-grid-gap: var(--vds-space-4);
  --vds-grid-gap-lg: var(--vds-space-6);
  --vds-page-margin: var(--vds-space-6);

  /* Breakpoints (reference; use in media queries) */
  --vds-bp-sm: 640px;
  --vds-bp-md: 900px;
  --vds-bp-lg: 1200px;
  --vds-bp-xl: 1440px;

  /* ——— Radius ——— */
  --vds-radius-xs: 4px;
  --vds-radius-sm: 8px;
  --vds-radius-md: 12px;
  --vds-radius-lg: 16px;
  --vds-radius-xl: 22px;
  --vds-radius-pill: 999px;

  /* ——— Shadows ——— */
  --vds-shadow-xs: 0 1px 2px rgba(16, 39, 30, 0.06);
  --vds-shadow-sm: 0 4px 12px rgba(16, 39, 30, 0.07);
  --vds-shadow-md: 0 10px 28px rgba(16, 39, 30, 0.1);
  --vds-shadow-lg: 0 18px 44px rgba(16, 39, 30, 0.12);
  --vds-shadow-focus: 0 0 0 3px rgba(22, 132, 75, 0.28);

  /* ——— Borders ——— */
  --vds-border-width: 1px;
  --vds-border: var(--vds-border-width) solid var(--vds-color-border);

  /* ——— Icons ——— */
  --vds-icon-xs: 14px;
  --vds-icon-sm: 16px;
  --vds-icon-md: 20px;
  --vds-icon-lg: 24px;
  --vds-icon-xl: 32px;

  /* ——— Control sizes (a11y: 44px touch) ——— */
  --vds-control-sm: 36px;
  --vds-control-md: 44px;
  --vds-control-lg: 52px;

  /* ——— Z-index ——— */
  --vds-z-dropdown: 1000;
  --vds-z-sticky: 1100;
  --vds-z-drawer: 1200;
  --vds-z-modal: 1300;
  --vds-z-toast: 1400;
  --vds-z-tooltip: 1500;

  /* ——— Motion (max 180ms) ——— */
  --vds-duration-fast: 100ms;
  --vds-duration: 160ms;
  --vds-duration-slow: 180ms;
  --vds-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}