@layer base {
  /* OKLCH Color System
   * Store Lightness/Chroma/Hue separately for dark mode flexibility.
   * Pattern used identically across Campfire, Writebook, and Fizzy.
   *
   * Usage: oklch(var(--lch-blue)) or color-mix() for derived colors.
   */

  :root {
    /* --- Brand identity (Parlamundo) --- */
    --lch-primary: 47% 0.09 161;       /* #1B6B4A — forest green */
    --lch-accent: 77% 0.14 77;         /* #E8A838 — warm amber */

    /* --- Palette colors (LCH triplets) --- */
    --lch-blue: 54% 0.15 255;
    --lch-red: 51% 0.2 31;
    --lch-green: 65% 0.23 142;
    --lch-yellow: 80% 0.18 85;
    --lch-purple: 50% 0.2 300;
    --lch-orange: 65% 0.18 55;

    /* --- Brand semantic colors --- */
    --color-primary: oklch(var(--lch-primary));
    --color-primary-hover: color-mix(in oklch, oklch(var(--lch-primary)) 85%, white);
    --color-primary-active: color-mix(in oklch, oklch(var(--lch-primary)) 90%, black);
    --color-accent: oklch(var(--lch-accent));
    --color-accent-hover: color-mix(in oklch, oklch(var(--lch-accent)) 85%, white);

    /* --- Semantic colors --- */
    --color-link: oklch(var(--lch-blue));
    --color-positive: oklch(var(--lch-green));
    --color-negative: oklch(var(--lch-red));
    --color-warning: oklch(var(--lch-yellow));
    --color-success: var(--color-positive);
    --color-error: var(--color-negative);

    /* --- Surface colors --- */
    --color-canvas: oklch(99% 0 0);
    --color-surface: oklch(96% 0 0);
    --color-ink: oklch(15% 0 0);
    --color-ink-muted: oklch(45% 0 0);
    --color-border: oklch(85% 0 0);

    /* --- Text color aliases --- */
    --color-text: var(--color-ink);
    --color-text-muted: var(--color-ink-muted);
    --color-text-light: oklch(65% 0 0);

    /* --- Spacing scale (4px base) --- */
    --space-1: 0.25rem;    /*  4px */
    --space-2: 0.5rem;     /*  8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-6: 1.5rem;     /* 24px */
    --space-8: 2rem;       /* 32px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */

    /* --- Spacing (character-based horizontal, rem-based vertical) --- */
    --inline-space: 1ch;
    --block-space: 1rem;
    --inline-space-s: 0.5ch;
    --block-space-s: 0.5rem;
    --inline-space-l: 2ch;
    --block-space-l: 2rem;

    /* --- Radius --- */
    --radius-sm: 3px;
    --radius: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* --- Shadows --- */
    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.05);
    --shadow: 0 2px 8px oklch(0% 0 0 / 0.08);
    --shadow-md: 0 4px 16px oklch(0% 0 0 / 0.1);
    --shadow-lg: 0 8px 32px oklch(0% 0 0 / 0.15);

    /* --- Transitions --- */
    --transition-fast: 100ms ease;
    --transition-base: 150ms ease;
    --transition-slow: 300ms ease;

    /* --- Typography scale --- */
    --font-size-caption: 0.75rem;   /* 12px */
    --font-size-small: 0.875rem;    /* 14px */
    --font-size-body: 1rem;         /* 16px */

    /* --- Monospace stack (code + IPA notation) --- */
    --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      /* Brand — lighter for dark backgrounds */
      --lch-primary: 65% 0.09 161;
      --lch-accent: 83% 0.12 77;

      /* Palette — lighter, slightly desaturated */
      --lch-blue: 72% 0.16 248;
      --lch-red: 68% 0.18 28;
      --lch-green: 75% 0.2 140;
      --lch-yellow: 85% 0.16 83;
      --lch-purple: 70% 0.18 298;
      --lch-orange: 75% 0.16 53;

      /* Inverted surfaces */
      --color-canvas: oklch(14% 0 0);
      --color-surface: oklch(20% 0 0);
      --color-ink: oklch(90% 0 0);
      --color-ink-muted: oklch(60% 0 0);
      --color-border: oklch(30% 0 0);

      /* Text */
      --color-text-light: oklch(50% 0 0);

      /* Shadows — more opaque on dark backgrounds */
      --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.15);
      --shadow: 0 2px 8px oklch(0% 0 0 / 0.2);
      --shadow-md: 0 4px 16px oklch(0% 0 0 / 0.25);
      --shadow-lg: 0 8px 32px oklch(0% 0 0 / 0.3);
    }
  }

}