/* ============================================================
   Lexia Design System — CSS Variables
   v0.1 — May 2026
   Drop this into your stylesheet. Tokens prefixed with --lx-.
   ============================================================ */

:root {
  /* ---------- Primary: Esmeralda ---------- */
  --lx-primary-50:  #ecfdf5;
  --lx-primary-100: #d1fae5;
  --lx-primary-200: #a7f3d0;
  --lx-primary-300: #6ee7b7;
  --lx-primary-400: #34d399;
  --lx-primary-500: #10b981;
  --lx-primary-600: #059669;
  --lx-primary-700: #047857;
  --lx-primary-800: #065f46;
  --lx-primary-900: #064e3b;

  /* ---------- Neutral: warm slate ---------- */
  --lx-neutral-0:   #ffffff;
  --lx-neutral-50:  #fafaf9;
  --lx-neutral-100: #f4f4f2;
  --lx-neutral-200: #e7e7e3;
  --lx-neutral-300: #d1d1cb;
  --lx-neutral-400: #9b9b94;
  --lx-neutral-500: #6b6b65;
  --lx-neutral-600: #4a4a45;
  --lx-neutral-700: #2f2f2c;
  --lx-neutral-800: #1c1d22;
  --lx-neutral-900: #0f172a;

  /* ---------- Semantic ---------- */
  --lx-success-50:  #ecfdf5;
  --lx-success-500: #10b981;
  --lx-success-700: #047857;

  --lx-warning-50:  #fffbeb;
  --lx-warning-500: #f59e0b;
  --lx-warning-700: #b45309;

  --lx-danger-50:   #fef2f2;
  --lx-danger-500:  #e11d48;
  --lx-danger-700:  #be123c;

  --lx-info-50:     #eff6ff;
  --lx-info-500:    #2563eb;
  --lx-info-700:    #1d4ed8;

  /* ---------- Semantic tokens (light) ---------- */
  --lx-bg:                #fafaf9;
  --lx-surface:           #ffffff;
  --lx-surface-elevated:  #ffffff;
  --lx-surface-sunken:    #f4f4f2;
  --lx-surface-inverse:   #0f172a;

  --lx-border-subtle:     #e7e7e3;
  --lx-border-strong:     #d1d1cb;
  --lx-border-focus:      #10b981;

  --lx-text-primary:      #0f172a;
  --lx-text-secondary:    #4a4a45;
  --lx-text-muted:        #6b6b65;
  --lx-text-disabled:     #9b9b94;
  --lx-text-on-primary:   #ffffff;
  --lx-text-on-inverse:   #fafaf9;
  --lx-text-accent:       #059669;
  --lx-text-link:         #047857;

  --lx-accent:            #10b981;
  --lx-accent-hover:      #059669;
  --lx-accent-active:     #047857;
  --lx-accent-soft:       #ecfdf5;
  --lx-accent-soft-hover: #d1fae5;

  /* ---------- Type ---------- */
  --lx-font-sans: "Geist", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --lx-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --lx-font-serif: "Source Serif Pro", "Charter", Georgia, serif; /* reserved: legal documents */

  --lx-text-xs:   12px; --lx-lh-xs:   16px;
  --lx-text-sm:   13px; --lx-lh-sm:   20px;
  --lx-text-base: 15px; --lx-lh-base: 24px;
  --lx-text-md:   17px; --lx-lh-md:   26px;
  --lx-text-lg:   20px; --lx-lh-lg:   28px;
  --lx-text-xl:   24px; --lx-lh-xl:   32px;
  --lx-text-2xl:  32px; --lx-lh-2xl:  40px;
  --lx-text-3xl:  44px; --lx-lh-3xl:  52px;
  --lx-text-4xl:  60px; --lx-lh-4xl:  68px;

  --lx-fw-regular: 400;
  --lx-fw-medium:  500;
  --lx-fw-semibold: 600;
  --lx-fw-bold:    700;

  --lx-tracking-tight:  -0.02em;
  --lx-tracking-normal: 0;
  --lx-tracking-wide:   0.04em;
  --lx-tracking-mono:   0.02em;

  /* ---------- Spacing ---------- */
  --lx-space-1:  4px;
  --lx-space-2:  8px;
  --lx-space-3:  12px;
  --lx-space-4:  16px;
  --lx-space-5:  20px;
  --lx-space-6:  24px;
  --lx-space-8:  32px;
  --lx-space-10: 40px;
  --lx-space-12: 48px;
  --lx-space-16: 64px;
  --lx-space-20: 80px;

  /* ---------- Radius ---------- */
  --lx-radius-xs:   4px;
  --lx-radius-sm:   6px;
  --lx-radius-md:   8px;
  --lx-radius-lg:   12px;
  --lx-radius-xl:   16px;
  --lx-radius-2xl:  20px;
  --lx-radius-full: 999px;

  /* ---------- Elevation ---------- */
  --lx-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --lx-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06), 0 1px 3px 0 rgba(15, 23, 42, 0.04);
  --lx-shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --lx-shadow-lg: 0 12px 24px -8px rgba(15, 23, 42, 0.10), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
  --lx-shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.16);
  --lx-shadow-focus: 0 0 0 3px rgba(16, 185, 129, 0.20);

  /* ---------- Motion ---------- */
  --lx-duration-fast:   120ms;
  --lx-duration-base:   180ms;
  --lx-duration-slow:   240ms;
  --lx-ease-standard:   cubic-bezier(0.2, 0.6, 0.2, 1);
  --lx-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --lx-ease-exit:       cubic-bezier(0.4, 0, 0.6, 0.2);
}

/* ---------- Dark mode tokens ---------- */
[data-theme="dark"] {
  --lx-bg:                #0f172a;
  --lx-surface:           #161b2c;
  --lx-surface-elevated:  #1c2236;
  --lx-surface-sunken:    #0b1120;
  --lx-surface-inverse:   #fafaf9;

  --lx-border-subtle:     #232a40;
  --lx-border-strong:     #2f3854;
  --lx-border-focus:      #34d399;

  --lx-text-primary:      #f4f4f2;
  --lx-text-secondary:    #c8c9c4;
  --lx-text-muted:        #9b9b94;
  --lx-text-disabled:     #4a4a45;
  --lx-text-on-primary:   #04221a;
  --lx-text-on-inverse:   #0f172a;
  --lx-text-accent:       #34d399;
  --lx-text-link:         #6ee7b7;

  --lx-accent:            #10b981;
  --lx-accent-hover:      #34d399;
  --lx-accent-active:     #6ee7b7;
  --lx-accent-soft:       rgba(16, 185, 129, 0.12);
  --lx-accent-soft-hover: rgba(16, 185, 129, 0.18);

  --lx-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.30);
  --lx-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.36), 0 1px 3px 0 rgba(0, 0, 0, 0.24);
  --lx-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.40), 0 2px 4px -2px rgba(0, 0, 0, 0.24);
  --lx-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.50), 0 4px 8px -4px rgba(0, 0, 0, 0.30);
  --lx-shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.60);
  --lx-shadow-focus: 0 0 0 3px rgba(52, 211, 153, 0.30);
}