/* ============================================
   Global Design System Foundation

   Token Hierarchy:
     Layer 0 — OKLCH Primitives (L/C/H components, defined per theme)
     Layer 1 — Computed Tokens (derived from Layer 0 via oklch())
     Layer 2 — Semantic Tokens (shared across all themes, overridable)
     Layer 3 — Component Tokens (per-theme, per-component)

   Supports: Clarity, Stack, Terminal, Gloss, Atlas, Missing
   ============================================ */

:root {
  /* === Layer 2: Semantic Tokens (theme-overridable) === */

  /* Transition */
  --theme-transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;

  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Typography Scale */
  --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: 2rem;
  --text-4xl: 2.5rem;

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 1.75;

  /* Border Radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;

  /* Container Widths */
  --container-lg: 64rem;

  /* Default Color Palette (overridden by theme classes) */
  --color-bg: #ffffff;
  --color-fg: #171717;
  --color-muted: #525252;
  --color-faded: #a3a3a3;
  --color-accent: #4F46E5;
  --color-accent-hover: #4338CA;
  --color-surface: #fafafa;
  --color-border: #e5e5e5;

  /* Code Block Colors */
  --code-bg: #1e1e1e;
  --code-fg: #d4d4d4;

  /* Surface Computation Defaults */
  --surface-offset: 3%;
  --surface-hover-offset: 5%;

  /* Density (scaling factor for card/section spacing) */
  --density: 1;

  /* Prose Typography */
  --prose-max-width: 65ch;
  --prose-line-height: var(--leading-relaxed);
  --prose-paragraph-spacing: var(--space-4);
  --prose-heading-spacing: var(--space-8);
}

/* Default dark mode - explicit toggle */
html.-dark-mode {
  --color-bg: #0A0A0A;
  --color-fg: #FAFAFA;
  --color-muted: #A3A3A3;
  --color-faded: #737373;
  --color-surface: #171717;
  --color-border: #404040;
  --color-accent: #818CF8;
  --color-accent-hover: #A5B4FC;
}

/* Default dark mode - system preference fallback */
@media (prefers-color-scheme: dark) {
  :root:not(.-no-dark-theme) {
    --color-bg: #0A0A0A;
    --color-fg: #FAFAFA;
    --color-muted: #A3A3A3;
    --color-faded: #737373;
    --color-surface: #171717;
    --color-border: #404040;
    --color-accent: #818CF8;
    --color-accent-hover: #A5B4FC;
  }
}

/* RTL support - use logical properties */
[dir="rtl"] {
  --text-align-start: right;
  --text-align-end: left;
}

[dir="ltr"], :root {
  --text-align-start: left;
  --text-align-end: right;
}

/* Code blocks should always be LTR (even in RTL layouts) */
pre, code,
.language-hyperscript,
.language-html,
.language-javascript,
.language-css,
.language-markup {
  direction: ltr;
  text-align: left;
}