/* LOMON DESIGN TOKENS — v1.0
   Semantic values are mapped per theme. Colors are sRGB hex unless noted.
   Contrast details and tested backgrounds: see ACCESSIBILITY.md.
*/
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  /* Brand colors */
  --brand-lime: #C6F04D;
  --brand-lime-secondary: #8FD14F;
  --brand-ink: #0B0E12;
  --brand-offwhite: #F2F5F0;
  --brand-error: #E5484D;

  /* Semantic colors — dark */
  --bg: #06080A;
  --surface: #0B0E12;
  --surface-raised: #0F1318;
  --surface-elevated: #171D22;
  --text: #F2F5F0;
  --text-muted: #9AA3AD;
  --text-subtle: #9AA3AD;  /* #5F6873 is decoration-only on dark */
  --text-disabled: #5F6873;
  --on-lime: #06080A;
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.15);
  --grid: rgba(255,255,255,.05);
  --glass: rgba(15,19,24,.75);
  --glass-strong: rgba(17,22,27,.92);
  --success: #43C99C;
  --success-text: #43C99C;
  --warning: #F0AE49;
  --warning-text: #F0AE49;
  --error: #E5484D;
  --error-text: #F77B80;
  --focus: #C6F04D;
  --focus-outline: #06080A;
  --accent-soft: rgba(198,240,77,.09);
  --glow-soft: rgba(198,240,77,.18);
  --shadow-card: 0 16px 60px rgba(0,0,0,.26);
  --shadow-popover: 0 20px 65px rgba(0,0,0,.40);
  --shadow-glow-sm: 0 0 18px rgba(198,240,77,.12);
  --shadow-glow-md: 0 0 38px rgba(198,240,77,.18);
  --shadow-glow-lg: 0 0 80px rgba(198,240,77,.23);

  /* Fonts */
  --font-heading: "Space Grotesk", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --tracking-heading: -.02em;
  --tracking-mono: .10em;

  /* Mobile-first type scale, clamp applied in component rules */
  --type-12: .75rem;
  --type-14: .875rem;
  --type-16: 1rem;
  --type-18: 1.125rem;
  --type-20: 1.25rem;
  --type-24: 1.5rem;
  --type-32: 2rem;
  --type-40: 2.5rem;
  --type-48: 3rem;
  --type-60: 3.75rem;
  --type-72: 4.5rem;

  /* 4 px spacing system */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Geometry */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --icon-stroke: 1.75;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --duration-fast: 200ms;
  --duration-base: 350ms;
  --duration-reveal: 700ms;
  --max-width: 1180px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F2F5F0;
  --surface: #FFFFFF;
  --surface-raised: #E9EEE8;
  --surface-elevated: #E5EBE4;
  --text: #0B0E12;
  --text-muted: #505A64;
  --text-subtle: #5F6873;
  --text-disabled: #707A84;
  --on-lime: #06080A;
  --border: rgba(6,8,10,.10);
  --border-strong: rgba(6,8,10,.18);
  --grid: rgba(6,8,10,.06);
  --glass: rgba(255,255,255,.78);
  --glass-strong: rgba(255,255,255,.94);
  --success: #116346;
  --success-text: #116346;
  --warning: #795111;
  --warning-text: #795111;
  --error: #E5484D;
  --error-text: #9F1E27;
  --focus: #116346;
  --focus-outline: #F2F5F0;
  --accent-soft: rgba(143,209,79,.17);
  --glow-soft: rgba(143,209,79,.16);
  --shadow-card: 0 14px 45px rgba(24,41,24,.075);
  --shadow-popover: 0 18px 60px rgba(24,41,24,.15);
  --shadow-glow-sm: 0 0 18px rgba(143,209,79,.08);
  --shadow-glow-md: 0 0 38px rgba(143,209,79,.12);
  --shadow-glow-lg: 0 0 80px rgba(143,209,79,.16);
}