/* ==========================================================================
   Cachay Store · Design tokens
   ========================================================================== */
:root {
  /* Brand */
  --red-500: oklch(58% 0.215 27);
  --red-600: oklch(51% 0.205 27);
  --red-700: oklch(44% 0.19 27);
  --red-400: oklch(66% 0.19 27);
  --red-glow: oklch(58% 0.215 27 / 0.35);

  /* Dark surfaces */
  --bg-950: oklch(8% 0.004 260);
  --bg-900: oklch(11% 0.005 260);
  --bg-850: oklch(14% 0.006 260);
  --bg-800: oklch(17% 0.007 260);
  --bg-750: oklch(21% 0.008 260);
  --line-dark: oklch(28% 0.008 260);
  --line-dark-soft: oklch(22% 0.006 260);

  /* Light surfaces */
  --bg-white: oklch(99% 0 0);
  --bg-fog: oklch(96.5% 0.003 260);
  --bg-fog-2: oklch(93% 0.004 260);
  --line-light: oklch(88% 0.004 260);

  /* Text */
  --ink-on-dark: oklch(97% 0.002 260);
  --ink-on-dark-dim: oklch(74% 0.01 260);
  --ink-on-dark-faint: oklch(52% 0.012 260);
  --ink-on-light: oklch(15% 0.006 260);
  --ink-on-light-dim: oklch(40% 0.012 260);
  --ink-on-light-faint: oklch(58% 0.01 260);

  /* Semantic */
  --ok-500: oklch(62% 0.16 149);
  --warn-500: oklch(75% 0.16 75);

  /* Type */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-h3: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.75rem);
  --fs-h1: clamp(2.5rem, 1.7rem + 3.2vw, 5.25rem);

  /* Space (4px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.3);
  --shadow-md: 0 8px 24px -8px oklch(0% 0 0 / 0.45);
  --shadow-lg: 0 20px 48px -16px oklch(0% 0 0 / 0.55);
  --shadow-red: 0 10px 30px -8px var(--red-glow);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;

  /* Layout */
  --container: 1320px;
  --header-h: 68px;
  --header-h-scrolled: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* Z-index scale (semantic) */
  --z-base: 0;
  --z-card-hover: 5;
  --z-sticky-nav: 40;
  --z-category-bar: 35;
  --z-fab: 45;
  --z-drawer-scrim: 60;
  --z-drawer: 61;
  --z-modal-scrim: 70;
  --z-modal: 71;
  --z-toast: 80;
}