@layer reset, base, components, utilities;

:root {
  --font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  --block-space: 1rem;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: var(--block-space);
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: calc(var(--block-space) * 2);
  --spacing-10: 2.5rem;
  --spacing-12: calc(var(--block-space) * 3);
  --spacing-16: calc(var(--block-space) * 4);
  --inline-space: 1ch;

  /* Tier 1 — Raw OKLCH values */
  --lch-white: 100% 0 0;
  --lch-canvas: 96% 0.005 256;
  --lch-canvas-warm: 94% 0.008 93;
  --lch-ink-darkest: 26% 0.05 264;
  --lch-ink-darker: 36% 0.03 262;
  --lch-ink-dark: 50% 0.02 260;
  --lch-ink-medium: 68% 0.01 258;
  --lch-ink-light: 84% 0.006 256;
  --lch-ink-lighter: 92% 0.004 254;
  --lch-ink-lightest: 97% 0.002 252;

  --lch-blue-50: 94% 0.04 265;
  --lch-blue-100: 88% 0.07 262;
  --lch-blue-200: 82% 0.1 260;
  --lch-blue-400: 65% 0.15 258;
  --lch-blue-500: 58% 0.17 258;
  --lch-blue-600: 52% 0.19 260;
  --lch-blue-700: 45% 0.2 262;

  --lch-red-500: 55% 0.2 20;
  --lch-red-700: 45% 0.18 22;

  --lch-green-50: 95% 0.04 175;
  --lch-green-500: 55% 0.16 175;

  --lch-amber-50: 96% 0.02 85;
  --lch-amber-100: 92% 0.05 80;
  --lch-amber-400: 70% 0.16 78;
  --lch-amber-500: 62% 0.16 73;

  /* Tier 2 — Named semantic colors */
  --color-black: oklch(var(--lch-ink-darkest));
  --color-white: oklch(var(--lch-white));
  --color-body-bg: oklch(var(--lch-canvas-warm));

  --color-gray-50: oklch(var(--lch-ink-lightest));
  --color-gray-100: oklch(var(--lch-ink-lighter));
  --color-gray-200: oklch(var(--lch-ink-lighter));
  --color-gray-300: oklch(var(--lch-ink-light));
  --color-gray-400: oklch(var(--lch-ink-medium));
  --color-gray-500: oklch(var(--lch-ink-medium));
  --color-gray-600: oklch(var(--lch-ink-dark));
  --color-gray-700: oklch(var(--lch-ink-darker));
  --color-gray-800: oklch(var(--lch-ink-darkest));

  --color-primary-50: oklch(var(--lch-blue-50));
  --color-primary-100: oklch(var(--lch-blue-100));
  --color-primary-200: oklch(var(--lch-blue-200));
  --color-primary-400: oklch(var(--lch-blue-400));
  --color-primary-500: oklch(var(--lch-blue-500));
  --color-primary-600: oklch(var(--lch-blue-600));
  --color-primary-700: oklch(var(--lch-blue-700));

  --color-accent-50: oklch(var(--lch-amber-50));
  --color-accent-100: oklch(var(--lch-amber-100));
  --color-accent-400: oklch(var(--lch-amber-400));
  --color-accent-500: oklch(var(--lch-amber-500));

  --color-red-500: oklch(var(--lch-red-500));
  --color-red-700: oklch(var(--lch-red-700));

  --color-success-50: oklch(var(--lch-green-50));
  --color-success-500: oklch(var(--lch-green-500));

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  --shadow-sm: 0 1px 2px oklch(var(--lch-ink-darkest) / 0.05);
  --shadow-md: 0 4px 6px -1px oklch(var(--lch-ink-darkest) / 0.1), 0 2px 4px -2px oklch(var(--lch-ink-darkest) / 0.1);
  --shadow-lg: 0 10px 15px -3px oklch(var(--lch-ink-darkest) / 0.1), 0 4px 6px -4px oklch(var(--lch-ink-darkest) / 0.1);

  --form-max-width: 45rem;
}

html[data-theme="dark"] {
  --lch-white: 20% 0.02 233;
  --lch-canvas: 20% 0.02 233;
  --lch-canvas-warm: 22% 0.03 80;
  --lch-ink-darkest: 96% 0.003 260;
  --lch-ink-darker: 88% 0.005 258;
  --lch-ink-dark: 76% 0.008 256;
  --lch-ink-medium: 60% 0.01 254;
  --lch-ink-light: 40% 0.02 260;
  --lch-ink-lighter: 28% 0.02 262;
  --lch-ink-lightest: 22% 0.02 264;

  --lch-blue-50: 25% 0.04 260;
  --lch-blue-100: 30% 0.06 258;
  --lch-blue-200: 35% 0.08 258;
  --lch-blue-400: 55% 0.14 260;
  --lch-blue-500: 62% 0.16 258;
  --lch-blue-600: 68% 0.17 258;
  --lch-blue-700: 75% 0.14 260;

  --lch-red-500: 55% 0.18 22;
  --lch-red-700: 48% 0.16 24;

  --lch-green-50: 22% 0.03 175;
  --lch-green-500: 55% 0.14 175;

  --lch-amber-50: 22% 0.03 82;
  --lch-amber-100: 28% 0.05 80;
  --lch-amber-400: 65% 0.14 78;
  --lch-amber-500: 70% 0.15 75;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --lch-white: 20% 0.02 233;
    --lch-canvas: 20% 0.02 233;
    --lch-canvas-warm: 22% 0.03 80;
    --lch-ink-darkest: 96% 0.003 260;
    --lch-ink-darker: 88% 0.005 258;
    --lch-ink-dark: 76% 0.008 256;
    --lch-ink-medium: 60% 0.01 254;
    --lch-ink-light: 40% 0.02 260;
    --lch-ink-lighter: 28% 0.02 262;
    --lch-ink-lightest: 22% 0.02 264;

    --lch-blue-50: 25% 0.04 260;
    --lch-blue-100: 30% 0.06 258;
    --lch-blue-200: 35% 0.08 258;
    --lch-blue-400: 55% 0.14 260;
    --lch-blue-500: 62% 0.16 258;
    --lch-blue-600: 68% 0.17 258;
    --lch-blue-700: 75% 0.14 260;

    --lch-red-500: 55% 0.18 22;
    --lch-red-700: 48% 0.16 24;

    --lch-green-50: 22% 0.03 175;
    --lch-green-500: 55% 0.14 175;

    --lch-amber-50: 22% 0.03 82;
    --lch-amber-100: 28% 0.05 80;
    --lch-amber-400: 65% 0.14 78;
    --lch-amber-500: 70% 0.15 75;
  }
}