@layer vendor, reset, base, layout, components, utilities, native;

:root {
  --lch-primary: 40% 0.10 205;
  --lch-primary-hover: 33% 0.09 205;
  --lch-primary-container: 95% 0.03 205;
  --lch-secondary: 68% 0.2 45;
  --lch-secondary-container: 92% 0.05 45;
  --lch-ink: 26% 0.02 260;
  --lch-ink-subtle: 45% 0.02 260;
  --lch-ink-muted: 60% 0.015 260;
  --lch-canvas: 93% 0.005 175;
  --lch-surface: 100% 0 0;
  --lch-border: 88% 0.01 260;
  --lch-border-subtle: 92% 0.005 260;
  --lch-positive: 55% 0.18 145;
  --lch-positive-bg: 95% 0.03 145;
  --lch-negative: 55% 0.2 25;
  --lch-negative-bg: 95% 0.03 25;
  --lch-info: 55% 0.15 260;
  --lch-info-bg: 95% 0.02 260;
  --lch-warning: 70% 0.15 85;
  --lch-warning-bg: 95% 0.03 85;

  /* Raw LCH values for alpha compositing in overlays */
  --lch-amber: 40% 0.12 65;
  --color-amber: oklch(var(--lch-amber));

  --lch-white: 100% 0 0;
  --lch-black: 0% 0 0;

  --color-primary: oklch(var(--lch-primary));
  --color-primary-hover: oklch(var(--lch-primary-hover));
  --color-primary-container: oklch(var(--lch-primary-container));
  --color-secondary: oklch(var(--lch-secondary));
  --color-secondary-container: oklch(var(--lch-secondary-container));
  --color-ink: oklch(var(--lch-ink));
  --color-ink-subtle: oklch(var(--lch-ink-subtle));
  --color-ink-muted: oklch(var(--lch-ink-muted));
  --color-ink-inverted: oklch(100% 0 0);
  --color-on-primary: oklch(100% 0 0);
  --color-canvas: oklch(var(--lch-canvas));
  --color-surface: oklch(var(--lch-surface));
  --color-border: oklch(var(--lch-border));
  --color-border-subtle: oklch(var(--lch-border-subtle));
  --color-positive: oklch(var(--lch-positive));
  --color-positive-bg: oklch(var(--lch-positive-bg));
  --color-negative: oklch(var(--lch-negative));
  --color-negative-bg: oklch(var(--lch-negative-bg));
  --color-info: oklch(var(--lch-info));
  --color-info-bg: oklch(var(--lch-info-bg));
  --color-warning: oklch(var(--lch-warning));
  --color-warning-bg: oklch(var(--lch-warning-bg));

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.05);
  --shadow: 0 1px 3px oklch(0% 0 0 / 0.1), 0 1px 2px oklch(0% 0 0 / 0.06);
  --shadow-md: 0 4px 6px oklch(0% 0 0 / 0.1), 0 2px 4px oklch(0% 0 0 / 0.06);
  --shadow-lg: 0 10px 15px oklch(0% 0 0 / 0.1), 0 4px 6px oklch(0% 0 0 / 0.05);

  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;

  --container-sm: 40rem;
  --container-md: 48rem;
  --container-lg: 64rem;
  --container-xl: 80rem;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --z-dropdown: 10;
  --z-sticky: 20;
  --z-nav: 30;
  --z-modal: 40;
  --z-tooltip: 50;
}