/* Karmet Design System tokens (staged rollout) */
:root {
  /* Brand */
  --color-brand-50: #fff8e7;
  --color-brand-100: #fdefc7;
  --color-brand-200: #fbe08d;
  --color-brand-300: #f7cd4f;
  --color-brand-400: #f2bc2d;
  --color-brand-500: #e5aa17;
  --color-brand-600: #c88f10;
  --color-brand-700: #9d700e;
  --color-brand-800: #75550d;
  --color-brand-900: #4a3608;

  /* Neutral */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #faf9f6;
  --color-neutral-100: #f3f1ec;
  --color-neutral-200: #e7e3da;
  --color-neutral-300: #d8d2c5;
  --color-neutral-400: #b8af9e;
  --color-neutral-500: #968d7d;
  --color-neutral-600: #756d5f;
  --color-neutral-700: #5a5348;
  --color-neutral-800: #433d35;
  --color-neutral-900: #2d2924;
  --color-neutral-950: #1c1916;

  /* Ink */
  --color-ink-900: #2a2621;
  --color-ink-700: #4c453b;
  --color-ink-500: #736a5d;
  --color-ink-300: #a79d8f;

  /* Semantic */
  --color-success-500: #2e9d5b;
  --color-warning-500: #d18a1a;
  --color-error-500: #c74a45;
  --color-info-500: #2f7fd3;

  /* Surfaces */
  --color-surface-base: #faf9f6;
  --color-surface-raised: #ffffff;
  --color-surface-overlay: #fffdf7;
  --color-surface-inverse: #2d2924;

  /* Lines */
  --color-line-100: #eeeae2;
  --color-line-200: #e4ded2;
  --color-line-300: #d5cebf;
  --color-line-focus: #e5aa17;

  /* Shadows */
  --shadow-1: 0 2px 8px rgba(42, 38, 33, 0.06);
  --shadow-2: 0 8px 24px rgba(42, 38, 33, 0.08);
  --shadow-3: 0 14px 40px rgba(42, 38, 33, 0.12);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-border: rgba(255, 255, 255, 0.42);
  --glass-blur: 14px;
  --glass-saturation: 140%;

  /* Typography */
  --fs-1: 12px;
  --fs-2: 14px;
  --fs-3: 16px;
  --fs-4: 18px;
  --fs-5: 20px;
  --fs-6: 24px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* Spacing */
  --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;

  /* Control defaults */
  --control-h: 48px;
  --control-h-sm: 44px;
  --control-h-lg: 52px;
  --control-pad-x: 14px;
  --control-radius: var(--radius-lg);

  /* Compatibility aliases for current CSS */
  --accent: var(--color-brand-500);
  --accent-soft: var(--color-brand-100);
  --bg-main: var(--color-surface-base);
  --surface-1: var(--color-surface-raised);
  --surface-2: var(--color-neutral-100);
  --text-main: var(--color-ink-900);
  --text-muted: var(--color-ink-500);
  --border: var(--color-line-300);
  --border-soft: var(--color-line-200);
  --focus-ring: 0 0 0 3px rgba(229, 170, 23, 0.24);
  --success: var(--color-success-500);
  --warning: var(--color-warning-500);
  --danger: var(--color-error-500);
}