/* Design system tokens — kit: citrus-harbor */
:root {
  /* Primary (Deep Saffron) */
  --color-primary-25: #fff9f5;
  --color-primary-50: #fff4eb;
  --color-primary-100: #ffdec0;
  --color-primary-200: #ffcea1;
  --color-primary-300: #ffb876;
  --color-primary-400: #ffaa5c;
  --color-primary-500: #ff9533;
  --color-primary-600: #e8882e;
  --color-primary-700: #b56a24;
  --color-primary-800: #8c521c;
  --color-primary-900: #6b3f15;
  --color-primary-1000: #482b0e;

  /* Secondary / Teal */
  --color-secondary-25: #eef3f2;
  --color-secondary-50: #e6eeec;
  --color-secondary-100: #d5e4e0;
  --color-secondary-200: #b0d2ca;
  --color-secondary-300: #87c5b6;
  --color-secondary-400: #5bbba4;
  --color-secondary-500: #3aa58c;
  --color-secondary-600: #328472;
  --color-secondary-700: #296458;
  --color-secondary-800: #1e463e;
  --color-secondary-900: #132824;
  --color-secondary-1000: #060c0b;

  /* Neutral (Welden Blue) */
  --color-neutral-25: #f5f5f6;
  --color-neutral-50: #ececee;
  --color-neutral-100: #c5c6ca;
  --color-neutral-200: #a9aab1;
  --color-neutral-300: #82838d;
  --color-neutral-400: #696b77;
  --color-neutral-500: #444655;
  --color-neutral-600: #3e404d;
  --color-neutral-700: #30323c;
  --color-neutral-800: #25262f;
  --color-neutral-900: #1c1d24;
  --color-neutral-1000: #131418;

  --color-success-50: #e8f6ef;
  --color-success-500: #1ba75e;
  --color-danger-500: #f93a54;
  --color-error-500: #ef3b2e;
  --color-warning-500: #ffc107;
  --color-info-500: #005288;

  /* Semantic aliases — light */
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-500);
  --color-text-muted: var(--color-neutral-300);
  --color-text-disabled: var(--color-neutral-200);
  --color-text-inverse: var(--color-neutral-25);
  --color-text-on-brand: var(--color-primary-50);

  --color-bg-canvas: var(--color-neutral-25);
  --color-bg-canvas-brand: var(--color-primary-25);
  --color-bg-surface: #ffffff;
  --color-bg-muted: var(--color-neutral-50);
  --color-bg-subtle: var(--color-neutral-100);

  --color-border-default: var(--color-neutral-100);
  --color-border-strong: var(--color-neutral-200);
  --color-border-subtle: color-mix(in srgb, var(--color-border-default) 38%, transparent);
  --color-border-chip: color-mix(in srgb, var(--color-text-muted) 22%, transparent);

  --color-action-primary: var(--color-primary-500);
  --color-action-primary-hover: var(--color-primary-400);
  --color-action-primary-press: var(--color-primary-600);
  --color-action-secondary: var(--color-secondary-500);
  --color-action-danger: var(--color-danger-500);
  --color-action-success: var(--color-success-500);
  --color-action-warning: var(--color-warning-500);
  --color-focus-ring: var(--color-primary-500);

  /* Radius */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-40: 40px;
  --radius-64: 64px;
  --radius-80: 80px;

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-52: 52px;
  --space-64: 64px;
  --space-80: 80px;
  --space-120: 120px;

  /* Shadow */
  --shadow-e1: 0 -1px 4px rgba(0, 0, 0, 0.04);
  --shadow-e2: 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-e3: 0 1px 8px rgba(0, 0, 0, 0.08);
  --shadow-e4: 0 1px 8px rgba(0, 0, 0, 0.12);
  --shadow-e5: 0 8px 12px rgba(0, 0, 0, 0.12);
  --shadow-e6: 0 8px 16px rgba(0, 0, 0, 0.16);
  --shadow-e7: 0 16px 24px rgba(0, 0, 0, 0.16);

  /* Type */
  --font-display: "Vazirmatn", system-ui, sans-serif;
  --font-body: "Vazirmatn", system-ui, sans-serif;
  --font-ui: "Vazirmatn", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Vazirmatn", ui-monospace, monospace;

  --text-display-xl: clamp(2.6rem, 7vw, 4.6rem);
  --text-display-lg: clamp(1.45rem, 3vw, 1.9rem);
  --text-title-md: 1.05rem;
  --text-body-lg: 1.05rem;
  --text-body-md: 0.95rem;
  --text-body-sm: 0.88rem;
  --text-label-md: 14px;
  --text-label-sm: 12px;
  --text-caption: 10px;
  --text-mono-xs: 0.68rem;

  --leading-display-xl: 0.95;
  --leading-display-lg: 1.15;
  --leading-title-md: 1.35;
  --leading-body-lg: 1.55;
  --leading-body-md: 1.5;
  --leading-body-sm: 1.45;
  --leading-label-md: 24px;
  --leading-label-sm: 20px;

  /* Layout */
  --container-max: 1180px;
  --container-gutter: var(--space-16);
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Motion */
  --ease-default: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-moderate: 350ms;
  --duration-slow: 450ms;
  --duration-enter: 700ms;
}

[data-theme="dark"] {
  --color-primary-25: #482b0e;
  --color-primary-50: #6b3f15;
  --color-primary-100: #8c521c;
  --color-primary-200: #b56a24;
  --color-primary-300: #e8882e;
  --color-primary-400: #ff9533;
  --color-primary-500: #ffaa5c;
  --color-primary-600: #ffb876;
  --color-primary-700: #ffcea1;
  --color-primary-800: #ffdec0;
  --color-primary-900: #fff4eb;
  --color-primary-1000: #fff9f5;

  --color-secondary-25: #060c0b;
  --color-secondary-50: #132824;
  --color-secondary-100: #1e463e;
  --color-secondary-200: #296458;
  --color-secondary-300: #328472;
  --color-secondary-400: #3aa58c;
  --color-secondary-500: #5bbba4;
  --color-secondary-600: #87c5b6;
  --color-secondary-700: #b0d2ca;
  --color-secondary-800: #d5e4e0;
  --color-secondary-900: #e6eeec;
  --color-secondary-1000: #eef3f2;

  --color-neutral-25: #131418;
  --color-neutral-50: #1c1d24;
  --color-neutral-100: #25262f;
  --color-neutral-200: #30323c;
  --color-neutral-300: #3e404d;
  --color-neutral-400: #444655;
  --color-neutral-500: #696b77;
  --color-neutral-600: #82838d;
  --color-neutral-700: #a9aab1;
  --color-neutral-800: #c5c6ca;
  --color-neutral-900: #ececee;
  --color-neutral-1000: #f5f5f6;

  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-500);
  --color-text-muted: var(--color-neutral-600);
  --color-text-disabled: var(--color-neutral-300);
  --color-text-inverse: var(--color-neutral-25);
  --color-text-on-brand: var(--color-primary-25);

  --color-bg-canvas: var(--color-neutral-25);
  --color-bg-canvas-brand: var(--color-primary-25);
  --color-bg-surface: #1c1d24;
  --color-bg-muted: var(--color-neutral-50);
  --color-bg-subtle: var(--color-neutral-100);

  --color-border-default: var(--color-neutral-100);
  --color-border-strong: var(--color-neutral-200);
  --color-action-primary: var(--color-primary-500);
  --color-action-primary-hover: var(--color-primary-400);
  --color-action-primary-press: var(--color-primary-600);
  --color-action-secondary: var(--color-secondary-500);
  --color-focus-ring: var(--color-primary-500);
}