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

@layer base {
  :root {
    /* Typography */
    --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;

    /* Brand · burnt amber (OKLCH) */
    --color-brand-50:  oklch(0.98 0.02 85);
    --color-brand-100: oklch(0.95 0.04 85);
    --color-brand-200: oklch(0.90 0.08 85);
    --color-brand-300: oklch(0.84 0.13 80);
    --color-brand-400: oklch(0.79 0.16 75);
    --color-brand-500: oklch(0.73 0.17 65);
    --color-brand-600: oklch(0.64 0.16 55);
    --color-brand-700: oklch(0.55 0.14 50);
    --color-brand-800: oklch(0.47 0.11 45);
    --color-brand-900: oklch(0.42 0.09 45);
    --color-brand-950: oklch(0.30 0.07 40);

    /* Neutral · warm stone (OKLCH) */
    --color-stone-50:  oklch(0.98 0.005 75);
    --color-stone-100: oklch(0.96 0.005 75);
    --color-stone-200: oklch(0.91 0.008 75);
    --color-stone-300: oklch(0.85 0.01 60);
    --color-stone-400: oklch(0.71 0.01 60);
    --color-stone-500: oklch(0.55 0.01 55);
    --color-stone-600: oklch(0.45 0.01 55);
    --color-stone-700: oklch(0.38 0.01 50);
    --color-stone-800: oklch(0.27 0.01 50);
    --color-stone-900: oklch(0.22 0.01 50);
    --color-stone-950: oklch(0.15 0.01 50);

    /* Danger (OKLCH) */
    --color-danger-500: oklch(0.63 0.21 25);
    --color-danger-600: oklch(0.57 0.22 25);
    --color-danger-700: oklch(0.50 0.19 25);
    --color-danger-800: oklch(0.45 0.16 25);
    --color-danger-900: oklch(0.40 0.13 25);

    /* Status semantic colors — bg/fg pairs for tags, alerts, badges */
    --color-success-bg: oklch(0.95 0.05 145);
    --color-success-fg: oklch(0.38 0.12 145);
    --color-warning-bg: oklch(0.95 0.06 80);
    --color-warning-fg: oklch(0.45 0.13 60);
    --color-danger-bg:  oklch(0.94 0.05 25);
    --color-danger-fg:  var(--color-danger-700);
    --color-info-bg:    oklch(0.95 0.04 230);
    --color-info-fg:    oklch(0.42 0.13 240);

    /* Semantic surfaces */
    --color-canvas: var(--color-stone-50);
    --color-ink: var(--color-stone-900);
    --color-ink-dark: var(--color-stone-950);
    --color-ink-medium: var(--color-stone-600);
    --color-ink-light: var(--color-stone-400);
    --color-ink-lightest: var(--color-stone-200);
    --color-ink-inverted: #fff;
    --color-link: var(--color-brand-700);
    --color-negative: var(--color-danger-600);
    --color-positive: oklch(0.55 0.17 145);
    --color-selected: var(--color-brand-100);
    --color-highlight: var(--color-brand-50);
    --color-canvas-raised: oklch(0.95 0.005 75);
    --color-canvas-hover: oklch(0.97 0.005 75);
    --color-canvas-sunken: oklch(0.96 0.005 75);

    /* Spacing — 4 px base unit (0.25rem). Numeric scale is the primary API;
       semantic aliases kept for back-compat. */
    --space-0: 0;
    --space-1: 0.25rem;   /*  4 px */
    --space-2: 0.5rem;    /*  8 px */
    --space-3: 0.75rem;   /* 12 px */
    --space-4: 1rem;      /* 16 px — component padding, default gap */
    --space-5: 1.5rem;    /* 24 px — card padding, page gutter */
    --space-6: 2rem;      /* 32 px — between sibling cards */
    --space-7: 3rem;      /* 48 px — between page sections */
    --space-8: 4rem;      /* 64 px — major rhythm break */
    --space-9: 6rem;      /* 96 px — hero / landing */

    --inline-space: var(--space-4);
    --inline-space-half: var(--space-2);
    --inline-space-double: var(--space-6);
    --block-space: var(--space-4);
    --block-space-half: var(--space-2);
    --block-space-double: var(--space-6);

    /* Target sizes — WCAG 2.5.8 (AA) >= 24 px, 2.5.5 (AAA) >= 44 px */
    --target-min: 1.5rem;
    --target-recommended: 2.75rem;

    /* Type scale */
    --text-x-small: 0.75rem;
    --text-small: 0.8125rem;
    --text-base: 0.9375rem;
    --text-medium: 1.0625rem;
    --text-large: 1.25rem;
    --text-x-large: 1.5rem;
    --text-xx-large: 2rem;
    --text-display: 2.75rem;

    /* Type weights */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Line heights — WCAG 1.4.12 sets 1.5 as the body-text floor */
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* Letter spacing */
    --tracking-tighter: -0.02em;
    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.06em;
    --tracking-wider: 0.08em;

    /* Paragraph rhythm — WCAG 1.4.12 wants >= 2x font-size between paras */
    --paragraph-spacing: 1em;

    /* Shape */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-full: 99rem;

    /* Z-index */
    --z-popup: 100;
    --z-nav: 200;
    --z-flash: 300;
    --z-tooltip: 400;
    --z-modal: 500;

    /* Focus */
    --focus-ring-color: var(--color-brand-600);
    --focus-ring-size: 2px;
    --focus-ring-offset: 2px;

    /* Shadows */
    --shadow: 0 1px 3px oklch(0 0 0 / 0.1), 0 1px 2px oklch(0 0 0 / 0.06);

    /* Border */
    --border: 1px solid var(--color-ink-lightest);

    color-scheme: light;
  }

  html[data-theme="dark"] {
    --color-canvas: var(--color-stone-900);
    --color-ink: var(--color-stone-100);
    --color-ink-dark: var(--color-stone-50);
    --color-ink-medium: var(--color-stone-400);
    --color-ink-light: var(--color-stone-500);
    --color-ink-lightest: var(--color-stone-700);
    --color-ink-inverted: var(--color-stone-950);
    --color-link: var(--color-brand-400);
    --color-negative: var(--color-danger-500);
    --color-selected: oklch(0.30 0.06 50);
    --color-highlight: oklch(0.25 0.04 50);
    --color-canvas-raised: oklch(0.27 0.01 50);
    --color-canvas-hover: oklch(0.24 0.01 50);
    --color-canvas-sunken: oklch(0.235 0.01 50);
    --focus-ring-color: var(--color-brand-400);
    --shadow: 0 1px 3px oklch(0 0 0 / 0.4), 0 1px 2px oklch(0 0 0 / 0.3);
    --border: 1px solid var(--color-stone-700);
    --color-success-bg: oklch(0.28 0.06 145);
    --color-success-fg: oklch(0.85 0.13 145);
    --color-warning-bg: oklch(0.30 0.07 65);
    --color-warning-fg: oklch(0.86 0.13 75);
    --color-danger-bg:  oklch(0.32 0.08 25);
    --color-danger-fg:  oklch(0.84 0.13 25);
    --color-info-bg:    oklch(0.28 0.06 240);
    --color-info-fg:    oklch(0.85 0.12 230);

    color-scheme: dark;
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
      --color-canvas: var(--color-stone-900);
      --color-ink: var(--color-stone-100);
      --color-ink-dark: var(--color-stone-50);
      --color-ink-medium: var(--color-stone-400);
      --color-ink-light: var(--color-stone-500);
      --color-ink-lightest: var(--color-stone-700);
      --color-ink-inverted: var(--color-stone-950);
      --color-link: var(--color-brand-400);
      --color-negative: var(--color-danger-500);
      --color-selected: oklch(0.30 0.06 50);
      --color-highlight: oklch(0.25 0.04 50);
      --color-canvas-raised: oklch(0.27 0.01 50);
      --color-canvas-hover: oklch(0.24 0.01 50);
      --color-canvas-sunken: oklch(0.235 0.01 50);
      --focus-ring-color: var(--color-brand-400);
      --shadow: 0 1px 3px oklch(0 0 0 / 0.4), 0 1px 2px oklch(0 0 0 / 0.3);
      --border: 1px solid var(--color-stone-700);
      --color-success-bg: oklch(0.28 0.06 145);
      --color-success-fg: oklch(0.85 0.13 145);
      --color-warning-bg: oklch(0.30 0.07 65);
      --color-warning-fg: oklch(0.86 0.13 75);
      --color-danger-bg:  oklch(0.32 0.08 25);
      --color-danger-fg:  oklch(0.84 0.13 25);
      --color-info-bg:    oklch(0.28 0.06 240);
      --color-info-fg:    oklch(0.85 0.12 230);

      color-scheme: dark;
    }
  }
}