@layer reset, base, components, modules, utilities;

:root {
  /* ─── Brand palette (OKLCH) ─── */

  /* Warm black scale (editorial) */
  --lch-teal-1: 97% 0.005 80;
  --lch-teal-2: 93% 0.008 80;
  --lch-teal-3: 85% 0.010 80;
  --lch-teal-4: 20% 0.005 80;
  --lch-teal-5: 15% 0.005 80;
  --lch-teal-6: 10% 0.005 80;
  --lch-teal-7: 5% 0.005 80;

  /* Ink / neutrals — warm grey */
  --lch-black: 0% 0 0;
  --lch-white: 100% 0 0;
  --lch-ink-1: 97% 0.004 60;
  --lch-ink-2: 92% 0.008 60;
  --lch-ink-3: 78% 0.008 60;
  --lch-ink-4: 62% 0.006 60;
  --lch-ink-5: 55% 0.005 60;
  --lch-ink-6: 35% 0.005 60;
  --lch-ink-7: 20% 0.005 60;
  --lch-ink-8: 15% 0.005 60;

  /* Red */
  --lch-red-4: 52% 0.2 25;
  --lch-red-2: 92% 0.04 25;

  /* Green */
  --lch-green-4: 60% 0.18 150;
  --lch-green-2: 94% 0.03 150;

  /* Yellow */
  --lch-yellow-3: 82% 0.16 85;

  /* ─── Semantic colors ─── */
  --color-ink: oklch(var(--lch-ink-8));
  --color-ink-light: oklch(var(--lch-ink-5));
  --color-ink-lighter: oklch(var(--lch-ink-3));
  --color-ink-medium: oklch(var(--lch-ink-4));
  --color-ink-inverted: oklch(var(--lch-white));
  --color-canvas: oklch(98.5% 0.005 80);
  --color-canvas-raised: oklch(var(--lch-white));

  /* Brand turquoise as primary */
  --color-primary: oklch(var(--lch-teal-4));
  --color-primary-dark: oklch(var(--lch-teal-6));
  --color-primary-light: oklch(var(--lch-teal-2));
  --color-primary-subtle: oklch(var(--lch-teal-1));

  --color-link: oklch(var(--lch-teal-5));
  --color-positive: oklch(var(--lch-green-4));
  --color-negative: oklch(var(--lch-red-4));
  --color-highlight: oklch(var(--lch-yellow-3));
  --color-selected: oklch(var(--lch-teal-1));
  --color-selected-dark: oklch(var(--lch-teal-5));

  /* ─── Typography ─── */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Noto Sans", Helvetica, Arial, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji";
  --font-serif: "Playfair Display", ui-serif, Georgia, serif;
  --font-mono: ui-monospace, "Fira Code", monospace;

  --text-xx-small: 0.55rem;
  --text-x-small: 0.75rem;
  --text-small: 0.85rem;
  --text-normal: 0.95rem;
  --text-medium: 1.1rem;
  --text-large: 1.4rem;
  --text-x-large: 1.8rem;
  --text-xx-large: 2.5rem;

  /* ─── Spacing ─── */
  --inline-space: 1ch;
  --inline-space-half: 0.5ch;
  --inline-space-double: 2ch;
  --block-space: 1rem;
  --block-space-half: 0.5rem;
  --block-space-double: 2rem;

  /* ─── Border & Shadow ─── */
  --border-color: oklch(var(--lch-ink-2));
  --border-radius: 0;
  --border-radius-lg: 0;

  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;

  /* ─── Focus ─── */
  --focus-ring-color: oklch(var(--lch-ink-8));
  --focus-ring-offset: 2px;
  --focus-ring-size: 2px;
  --focus-ring: 2px solid oklch(var(--lch-ink-8));

  /* ─── Layout ─── */
  --main-padding: clamp(1.25ch, 4vw, 3ch);
  --main-width: 1200px;
  --header-height: 3.5rem;

  /* ─── Z-index ─── */
  --z-popup: 10;
  --z-nav: 20;
  --z-flash: 30;
  --z-tooltip: 40;
  --z-bar: 50;

  /* ─── Easing ─── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-overshoot: cubic-bezier(0.25, 1.75, 0.5, 1);
  --ease-out-overshoot-subtle: cubic-bezier(0.25, 1.25, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}