@theme {

  /* ─── Colors ─── */

  /* Primary */
  --color-primary-50: oklch(0.97 0.014 264);
  --color-primary-100: oklch(0.93 0.034 264);
  --color-primary-200: oklch(0.86 0.068 264);
  --color-primary-300: oklch(0.76 0.12 264);
  --color-primary-400: oklch(0.66 0.18 264);
  --color-primary-500: oklch(0.55 0.24 264);
  --color-primary-600: oklch(0.48 0.22 264);
  --color-primary-700: oklch(0.40 0.19 264);
  --color-primary-800: oklch(0.33 0.15 264);
  --color-primary-900: oklch(0.27 0.11 264);
  --color-primary-950: oklch(0.20 0.08 264);

  /* Accent */
  --color-accent-50: oklch(0.97 0.014 333);
  --color-accent-100: oklch(0.93 0.04 333);
  --color-accent-200: oklch(0.86 0.09 333);
  --color-accent-300: oklch(0.76 0.16 333);
  --color-accent-400: oklch(0.69 0.22 333);
  --color-accent-500: oklch(0.48 0.24 333);
  --color-accent-600: oklch(0.42 0.22 333);
  --color-accent-700: oklch(0.45 0.20 333);
  --color-accent-800: oklch(0.37 0.16 333);
  --color-accent-900: oklch(0.30 0.12 333);
  --color-accent-950: oklch(0.22 0.08 333);

  /* Warn */
  --color-warn-50: oklch(0.97 0.014 25);
  --color-warn-100: oklch(0.93 0.04 25);
  --color-warn-200: oklch(0.86 0.09 25);
  --color-warn-300: oklch(0.76 0.16 25);
  --color-warn-400: oklch(0.66 0.21 25);
  --color-warn-500: oklch(0.50 0.24 25);
  --color-warn-600: oklch(0.44 0.21 25);
  --color-warn-700: oklch(0.42 0.17 25);
  --color-warn-800: oklch(0.35 0.13 25);
  --color-warn-900: oklch(0.28 0.09 25);
  --color-warn-950: oklch(0.21 0.06 25);

  /* Neutral / Surface */
  --color-surface-50: oklch(0.985 0.002 280);
  --color-surface-100: oklch(0.965 0.004 280);
  --color-surface-200: oklch(0.93 0.006 280);
  --color-surface-300: oklch(0.87 0.008 280);
  --color-surface-400: oklch(0.71 0.01 280);
  --color-surface-500: oklch(0.55 0.012 280);
  --color-surface-600: oklch(0.45 0.012 280);
  --color-surface-700: oklch(0.37 0.012 280);
  --color-surface-800: oklch(0.27 0.008 280);
  --color-surface-900: oklch(0.21 0.006 280);
  --color-surface-950: oklch(0.14 0.004 280);

  /* Success */
  --color-success-100: oklch(0.94 0.05 145);
  --color-success-400: oklch(0.72 0.20 145);
  --color-success-500: oklch(0.48 0.17 145);
  --color-success-600: oklch(0.42 0.15 145);
  --color-success-800: oklch(0.32 0.12 145);

  /* ═══════════════════════════════════════════════════════════
     Semantic tokens — component-level contracts
     ═══════════════════════════════════════════════════════════ */

  /* ─── Global ─── */
  --color-background: var(--color-surface-50);
  --color-foreground: var(--color-surface-900);

  /* ─── Primary ─── */
  --color-primary: var(--color-primary-500);
  --color-primary-foreground: var(--color-primary-50);
  --color-primary-hover: var(--color-primary-600);
  --color-primary-subtle: var(--color-primary-100);
  --color-primary-subtle-foreground: var(--color-primary-900);

  /* ─── Accent ─── */
  --color-accent: var(--color-accent-500);
  --color-accent-foreground: oklch(1 0 0);
  --color-accent-hover: var(--color-accent-600);
  --color-accent-subtle: var(--color-accent-100);
  --color-accent-subtle-foreground: var(--color-accent-800);

  /* ─── Warn ─── */
  --color-warn: var(--color-warn-500);
  --color-warn-foreground: oklch(1 0 0);
  --color-warn-hover: var(--color-warn-600);
  --color-warn-subtle: var(--color-warn-100);
  --color-warn-subtle-foreground: var(--color-warn-800);

  /* ─── Success ─── */
  --color-success: var(--color-success-500);
  --color-success-foreground: oklch(1 0 0);
  --color-success-hover: var(--color-success-600);
  --color-success-subtle: var(--color-success-100);
  --color-success-subtle-foreground: var(--color-success-800);

  /* ─── Muted (for subdued UI elements) ─── */
  --color-muted: var(--color-surface-200);
  --color-muted-foreground: var(--color-surface-700);
  --color-muted-hover: var(--color-surface-300);

  /* ─── Colored Border Subtle (alerts, banners) ─── */
  --color-primary-border-subtle: var(--color-primary-200);
  --color-success-border-subtle: oklch(0.86 0.10 145);
  --color-warn-border-subtle: var(--color-warn-200);

  /* ─── Subtle Surface Hover (close buttons on subtle backgrounds) ─── */
  --color-primary-subtle-hover: var(--color-primary-200);
  --color-success-subtle-hover: oklch(0.86 0.08 145);
  --color-warn-subtle-hover: var(--color-warn-200);

  /* ─── Muted Foreground in Colored Contexts (close buttons, secondary text) ─── */
  --color-primary-subtle-foreground-muted: var(--color-primary-600);
  --color-success-subtle-foreground-muted: var(--color-success-600);
  --color-warn-subtle-foreground-muted: var(--color-warn-600);
  --color-warn-foreground-muted: oklch(1 0 0 / 0.65);
  --color-success-foreground-muted: oklch(1 0 0 / 0.65);

  /* ─── Foreground Wash (faint hover on solid-color surfaces) ─── */
  --color-warn-foreground-wash: oklch(1 0 0 / 0.10);

  /* ─── Progress Track (bar on colored surfaces) ─── */
  --color-success-foreground-track: oklch(1 0 0 / 0.30);
  --color-warn-subtle-foreground-track: var(--color-warn-500);
  --color-warn-foreground-track: oklch(1 0 0 / 0.30);
  --color-primary-subtle-foreground-track: var(--color-primary-500);

  /* ─── Table ─── */
  --color-muted-stripe: var(--color-surface-100);
  --color-overlay: oklch(0.985 0.002 280 / 0.60);

  /* ─── Border & Ring ─── */
  --color-border: var(--color-surface-300);
  --color-border-subtle: var(--color-surface-200);
  --color-ring: var(--color-primary-500);

  /* ─── Overlay / Popover ─── */
  --color-backdrop: oklch(0 0 0 / 0.8);
  --color-popover: var(--color-surface-50);
  --color-popover-foreground: var(--color-surface-900);

  /* ─── Card ─── */
  --color-card: var(--color-surface-50);
  --color-card-foreground: var(--color-surface-900);

  /* ─── Tooltip (dark bg, light text) ─── */
  --color-tooltip: var(--color-surface-900);
  --color-tooltip-foreground: var(--color-surface-50);

  /* ─── Input ─── */
  --color-input-border: var(--color-surface-300);
  --color-input-background: var(--color-surface-50);
  --color-input-foreground: var(--color-surface-900);
  --color-input-placeholder: var(--color-surface-500);
  --color-input-disabled: var(--color-surface-100);

  /* ─── Placeholder / Disabled ─── */
  --color-placeholder: var(--color-surface-500);
  --color-disabled: var(--color-surface-300);
  --color-disabled-foreground: var(--color-surface-500);

  /* ─── Typography ─── */

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-heading: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, SFMono-Regular,
    Menlo, monospace;

  --text-xs: 0.75rem;
  --text-xs--line-height: 1rem;
  --text-sm: 0.875rem;
  --text-sm--line-height: 1.25rem;
  --text-base: 1rem;
  --text-base--line-height: 1.5rem;
  --text-lg: 1.125rem;
  --text-lg--line-height: 1.75rem;
  --text-xl: 1.25rem;
  --text-xl--line-height: 1.75rem;
  --text-2xl: 1.5rem;
  --text-2xl--line-height: 2rem;
  --text-3xl: 1.875rem;
  --text-3xl--line-height: 2.25rem;
  --text-4xl: 2.25rem;
  --text-4xl--line-height: 2.5rem;
  --text-5xl: 3.125rem;
  --text-5xl--line-height: 1;
  --text-5xl--letter-spacing: -0.025em;

  /* ─── Spacing ─── */

  --spacing: 0.25rem;

  /* ─── Border Radius (Primitive) ─── */

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-pill: 9999px;

  /* ─── Border Radius (Semantic) ─── */

  /* Interactive Controls */
  --radius-control-sm: var(--radius-md);   /* Small buttons, footer buttons */
  --radius-control: var(--radius-md);      /* Default/large buttons, icon buttons */

  /* Form Inputs */
  --radius-input: var(--radius-md);        /* Input fields, triggers, selects */

  /* Containers */
  --radius-card: var(--radius-lg);         /* Cards, panels */
  --radius-collapsible: var(--radius-md);  /* Collapsible containers and triggers */

  /* Overlays */
  --radius-overlay: var(--radius-lg);      /* Dropdown panels, datepicker panels */
  --radius-popover: var(--radius-xl);      /* Popovers, menus, tooltips */

  /* Indicators */
  --radius-badge: var(--radius-md);        /* Badges (default/lg sizes) */
  --radius-badge-sm: var(--radius-sm);     /* Small badges */
  --radius-tag: var(--radius-sm);          /* Multi-select tags */

  /* Calendar */
  --radius-calendar: var(--radius-lg);     /* Calendar container */
  --radius-calendar-cell: var(--radius-lg); /* Year/multi-year cells */

  /* Small Interactive Elements */
  --radius-interactive-sm: var(--radius-sm); /* Checkboxes, close/clear buttons */

  /* Tabs */
  --radius-tab-list: var(--radius-lg);     /* Tab header/list container */
  --radius-tab: var(--radius-md);          /* Individual tab items */

  /* Media */
  --radius-media: var(--radius-md);        /* Media elements, inset images */

  /* ─── Shadows ─── */

  --shadow-xs: 0 1px 2px oklch(0.14 0.004 280 / 0.05);
  --shadow-sm: 0 1px 3px oklch(0.14 0.004 280 / 0.1), 0 1px 2px oklch(0.14 0.004 280 / 0.06);
  --shadow-md: 0 4px 6px oklch(0.14 0.004 280 / 0.1), 0 2px 4px oklch(0.14 0.004 280 / 0.06);
  --shadow-lg: 0 10px 15px oklch(0.14 0.004 280 / 0.1), 0 4px 6px oklch(0.14 0.004 280 / 0.05);
  --shadow-xl: 0 20px 25px oklch(0.14 0.004 280 / 0.1), 0 8px 10px oklch(0.14 0.004 280 / 0.04);

  /* ─── Semantic Shadows ─── */
  --shadow-card: var(--shadow-md);
  --shadow-overlay: var(--shadow-lg);
  --shadow-dialog: var(--shadow-xl);

  /* ─── Icon Sizes ─── */
  /* Used by com-icon CVA size variant. Values = Lucide's size prop (px). */
  --size-icon-xs: 0.75rem;   /* 12px — inline micro icons */
  --size-icon-sm: 1rem;      /* 16px — inline with text-sm */
  --size-icon-md: 1.25rem;   /* 20px — inline with text-base */
  --size-icon-lg: 1.5rem;    /* 24px — default standalone, Lucide default */
  --size-icon-xl: 2rem;      /* 32px — emphasis / hero */
  --size-icon-2xl: 2.5rem;   /* 40px — large feature icons */

  /* ─── Transitions ─── */

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Transition Durations ─── */
  --duration-fast: 100ms;
  --duration-normal: 150ms;
  --duration-slow: 200ms;

  --animate-fade-in: fade-in 0.3s ease-out;
  --animate-slide-up: slide-up 0.3s ease-out;
  --animate-scale-in: scale-in 0.2s var(--ease-spring);
}