:root {
  --bg: oklch(0.985 0.003 60);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.97 0.004 60);
  --surface-3: oklch(0.945 0.005 60);
  --border: oklch(0.88 0.005 60);
  --border-2: oklch(0.93 0.005 60);
  --border-strong: oklch(0.78 0.006 60);
  --text: oklch(0.18 0.01 60);
  --text-2: oklch(0.45 0.008 60);
  --text-3: oklch(0.65 0.005 60);
  --text-on-accent: oklch(0.99 0 0);

  --accent: oklch(0.55 0.18 145);
  --accent-hover: oklch(0.48 0.18 145);
  --accent-active: oklch(0.42 0.18 145);
  --accent-soft: oklch(0.96 0.04 145);
  --accent-soft-2: oklch(0.92 0.05 145);
  --accent-ring: oklch(0.55 0.18 145 / 0.18);

  --state-success: oklch(0.6 0.16 145);
  --state-success-soft: oklch(0.95 0.04 145);
  --state-warning: oklch(0.72 0.15 70);
  --state-warning-soft: oklch(0.96 0.05 80);
  --state-danger: oklch(0.6 0.18 25);
  --state-danger-soft: oklch(0.95 0.05 25);
  --state-info: oklch(0.58 0.12 240);
  --state-info-soft: oklch(0.95 0.03 240);
  --state-neutral: oklch(0.55 0.005 60);
  --state-neutral-soft: oklch(0.94 0.004 60);
  --state-progress: oklch(0.65 0.15 280);
  --state-progress-soft: oklch(0.95 0.04 280);

  --brand-dark: oklch(0.25 0.04 50);
  --brand-brown: oklch(0.40 0.05 50);
  --brand-gold: oklch(0.72 0.12 80);
  --brand-cream: oklch(0.97 0.025 75);
  --brand-cream-2: oklch(0.95 0.03 75);

  --t-2xs: 0.6875rem;
  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.15rem;
  --t-xl: 1.3rem;
  --t-2xl: 1.5rem;
  --t-3xl: 1.75rem;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-base: 1.45;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  --r-sm: 5px;
  --r-md: 7px;
  --r-lg: 10px;
  --r-xl: 14px;

  --topbar-h: 48px;
  --sidebar-w: 220px;
  --sidebar-w-collapsed: 60px;
  --right-panel-w: 360px;
  --left-meta-w: 320px;

  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.04), 0 1px 3px oklch(0 0 0 / 0.06);
  --shadow-2: 0 2px 4px oklch(0 0 0 / 0.04), 0 6px 12px oklch(0 0 0 / 0.08);
  --shadow-3: 0 4px 8px oklch(0 0 0 / 0.06), 0 14px 28px oklch(0 0 0 / 0.12);
  --shadow-up: 0 -4px 12px oklch(0 0 0 / 0.06);

  --dur-1: 100ms;
  --dur-2: 150ms;
  --dur-3: 250ms;
  --dur-4: 400ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);

  --row-h-compact: 28px;
  --row-h-default: 36px;
  --row-h-comfort: 44px;

  --z-base: 1;
  --z-sticky: 10;
  --z-fab: 20;
  --z-slide: 50;
  --z-modal: 100;
  --z-toast: 200;
  --z-cmdk: 300;
}

[data-theme="dark"] {
  --bg: oklch(0.16 0.008 60);
  --surface: oklch(0.21 0.009 60);
  --surface-2: oklch(0.185 0.008 60);
  --surface-3: oklch(0.245 0.009 60);
  --border: oklch(0.32 0.007 60);
  --border-2: oklch(0.27 0.006 60);
  --border-strong: oklch(0.42 0.008 60);
  --text: oklch(0.95 0.005 60);
  --text-2: oklch(0.72 0.005 60);
  --text-3: oklch(0.52 0.005 60);
  --text-on-accent: oklch(0.12 0.01 60);

  --accent: oklch(0.7 0.16 145);
  --accent-hover: oklch(0.76 0.16 145);
  --accent-active: oklch(0.62 0.16 145);
  --accent-soft: oklch(0.30 0.07 145);
  --accent-soft-2: oklch(0.34 0.08 145);
  --accent-ring: oklch(0.7 0.16 145 / 0.25);

  --state-success: oklch(0.72 0.15 145);
  --state-success-soft: oklch(0.30 0.07 145);
  --state-warning: oklch(0.78 0.15 70);
  --state-warning-soft: oklch(0.30 0.08 70);
  --state-danger: oklch(0.7 0.18 25);
  --state-danger-soft: oklch(0.30 0.08 25);
  --state-info: oklch(0.7 0.13 240);
  --state-info-soft: oklch(0.30 0.06 240);
  --state-neutral: oklch(0.68 0.005 60);
  --state-neutral-soft: oklch(0.27 0.005 60);
  --state-progress: oklch(0.74 0.14 280);
  --state-progress-soft: oklch(0.30 0.07 280);

  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.4), 0 1px 3px oklch(0 0 0 / 0.5);
  --shadow-2: 0 2px 4px oklch(0 0 0 / 0.4), 0 6px 14px oklch(0 0 0 / 0.5);
  --shadow-3: 0 4px 8px oklch(0 0 0 / 0.5), 0 14px 32px oklch(0 0 0 / 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(0.16 0.008 60);
    --surface: oklch(0.21 0.009 60);
    --surface-2: oklch(0.185 0.008 60);
    --surface-3: oklch(0.245 0.009 60);
    --border: oklch(0.32 0.007 60);
    --border-2: oklch(0.27 0.006 60);
    --border-strong: oklch(0.42 0.008 60);
    --text: oklch(0.95 0.005 60);
    --text-2: oklch(0.72 0.005 60);
    --text-3: oklch(0.52 0.005 60);
    --text-on-accent: oklch(0.12 0.01 60);

    --accent: oklch(0.7 0.16 145);
    --accent-hover: oklch(0.76 0.16 145);
    --accent-active: oklch(0.62 0.16 145);
    --accent-soft: oklch(0.30 0.07 145);
    --accent-soft-2: oklch(0.34 0.08 145);
    --accent-ring: oklch(0.7 0.16 145 / 0.25);

    --state-success: oklch(0.72 0.15 145);
    --state-success-soft: oklch(0.30 0.07 145);
    --state-warning: oklch(0.78 0.15 70);
    --state-warning-soft: oklch(0.30 0.08 70);
    --state-danger: oklch(0.7 0.18 25);
    --state-danger-soft: oklch(0.30 0.08 25);
    --state-info: oklch(0.7 0.13 240);
    --state-info-soft: oklch(0.30 0.06 240);
    --state-neutral: oklch(0.68 0.005 60);
    --state-neutral-soft: oklch(0.27 0.005 60);
    --state-progress: oklch(0.74 0.14 280);
    --state-progress-soft: oklch(0.30 0.07 280);

    --shadow-1: 0 1px 2px oklch(0 0 0 / 0.4), 0 1px 3px oklch(0 0 0 / 0.5);
    --shadow-2: 0 2px 4px oklch(0 0 0 / 0.4), 0 6px 14px oklch(0 0 0 / 0.5);
    --shadow-3: 0 4px 8px oklch(0 0 0 / 0.5), 0 14px 32px oklch(0 0 0 / 0.6);
  }
}

[data-density="compact"] {
  --row-h: var(--row-h-compact);
  --table-cell-py: 4px;
  --table-fs: var(--t-xs);
}
[data-density="default"], :root {
  --row-h: var(--row-h-default);
  --table-cell-py: 8px;
  --table-fs: var(--t-sm);
}
[data-density="comfort"] {
  --row-h: var(--row-h-comfort);
  --table-cell-py: 12px;
  --table-fs: var(--t-base);
}