/* ============================================================
   LUMIAR · Design Tokens
   Dark, mystical, warm-plum + soft-gold.
   Mirrors tailwind.config.js from the Lumiar Expo codebase
   and adds semantic CSS variables for web/HTML usage.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* ---------- COLOR · Base obsidian palette ---------- */
  --lm-nyx:            #0D0A10;  /* deep purple-black, true base */
  --lm-obsidian:       #120E16;  /* default app background — warm plum */
  --lm-obsidian-light: #1C1622;  /* warm eggplant, cards & surfaces */
  --lm-obsidian-glow:  #2D1B36;  /* warm violet glow, hero accents */

  /* ---------- COLOR · Soft warm gold ---------- */
  --lm-gold-light:     #FDE68A;  /* pastel gold, particles, highlights */
  --lm-gold:           #E6C65B;  /* primary brand gold (text, icons, lines) */
  --lm-gold-dark:      #B08E2B;  /* amber bronze, pressed/hover deep */

  /* ---------- COLOR · Ethereal particles ---------- */
  --lm-peach:          #FFEDD5;
  --lm-rose:           #FCE7F3;
  --lm-lavender:       #E9D5FF;
  --lm-sky:            #BAE6FD;
  --lm-mint:           #A7F3D0;

  /* ---------- COLOR · Foreground (gold-based alphas) ---------- */
  --lm-fg-1:           #E6C65B;          /* primary readable gold */
  --lm-fg-2:           rgba(230,198,91,.80);
  --lm-fg-3:           rgba(230,198,91,.60);  /* labels */
  --lm-fg-4:           rgba(230,198,91,.40);  /* whisper */
  --lm-fg-5:           rgba(230,198,91,.25);  /* dividers, hairlines */

  /* ---------- COLOR · Hairlines / strokes ---------- */
  --lm-line-strong:    rgba(230,198,91,.45);
  --lm-line:           rgba(230,198,91,.30);
  --lm-line-soft:      rgba(230,198,91,.15);
  --lm-line-whisper:   rgba(230,198,91,.08);

  /* ---------- COLOR · Surface tints ---------- */
  --lm-surface-1:      rgba(28,22,34,.60);   /* card on obsidian */
  --lm-surface-2:      rgba(28,22,34,.40);   /* glass card */
  --lm-surface-veil:   rgba(45,27,54,.55);   /* obsidian-glow tint */
  --lm-veil:           rgba(13,10,16,.82);   /* modal scrim */

  /* ---------- COLOR · Semantic ---------- */
  --lm-success:        #A7F3D0;
  --lm-error:          #FCA5A5;

  /* ---------- TYPE · Families ---------- */
  --lm-font-serif:     'Cinzel', 'Trajan Pro', 'Cormorant Garamond', serif;
  --lm-font-sans:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------- TYPE · Scale (px) ---------- */
  --lm-text-2xs:       10px;
  --lm-text-sm:        12px;
  --lm-text-sm:        14px;
  --lm-text-base:      16px;
  --lm-text-lg:        18px;
  --lm-text-xl:        22px;
  --lm-text-2xl:       28px;
  --lm-text-3xl:       36px;
  --lm-text-4xl:       48px;
  --lm-text-display:   64px;

  /* ---------- TYPE · Tracking ---------- */
  --lm-track-tight:    -0.01em;
  --lm-track-normal:   0;
  --lm-track-wide:     0.08em;
  --lm-track-wider:    0.18em;
  --lm-track-widest:   0.30em;   /* signature LUMIAR wordmark */

  /* ---------- SPACING ---------- */
  --lm-s-1: 4px;
  --lm-s-2: 8px;
  --lm-s-3: 12px;
  --lm-s-4: 16px;
  --lm-s-5: 20px;
  --lm-s-6: 24px;
  --lm-s-8: 32px;
  --lm-s-10: 40px;
  --lm-s-12: 48px;
  --lm-s-16: 64px;
  --lm-s-20: 80px;
  --lm-s-24: 96px;

  /* ---------- RADII ---------- */
  --lm-r-sm:    8px;
  --lm-r-md:    12px;
  --lm-r-lg:    16px;
  --lm-r-xl:    20px;
  --lm-r-2xl:   24px;
  --lm-r-3xl:   28px;
  --lm-r-pill:  9999px;

  /* ---------- SHADOWS · soft warm glow ---------- */
  --lm-shadow-sm:    0 1px 2px rgba(0,0,0,.4);
  --lm-shadow-md:    0 4px 14px rgba(0,0,0,.5);
  --lm-shadow-lg:    0 12px 40px rgba(0,0,0,.6);
  --lm-glow-gold:    0 0 24px rgba(230,198,91,.18);
  --lm-glow-gold-strong: 0 0 40px rgba(230,198,91,.32);
  --lm-glow-violet:  0 0 80px rgba(45,27,54,.6);

  /* ---------- ELEVATION (composed) ---------- */
  --lm-elev-card:    var(--lm-shadow-md), inset 0 1px 0 rgba(255,255,255,.02);
  --lm-elev-hero:    var(--lm-shadow-lg), var(--lm-glow-gold);

  /* ---------- MOTION ---------- */
  --lm-ease:         cubic-bezier(.4,0,.2,1);
  --lm-ease-out:     cubic-bezier(0,0,.2,1);
  --lm-ease-spring:  cubic-bezier(.34,1.56,.64,1);
  --lm-dur-fast:     180ms;
  --lm-dur:          320ms;
  --lm-dur-slow:     600ms;
  --lm-dur-breath:   3500ms;    /* breathing-eye pulse */
}

/* ============================================================
   Backgrounds — recreating the ethereal multi-radial gradient
   used by BackgroundGlow.tsx in the app
   ============================================================ */
.lm-bg-obsidian {
  background-color: var(--lm-obsidian);
}
.lm-bg-glow {
  background-color: var(--lm-obsidian);
  background-image:
    radial-gradient(60% 60% at 85% 15%, rgba(233,213,255,.14) 0%, rgba(252,231,243,.06) 50%, rgba(18,14,22,0) 100%),
    radial-gradient(70% 70% at 15% 85%, rgba(255,237,213,.12) 0%, rgba(253,230,138,.06) 50%, rgba(18,14,22,0) 100%),
    radial-gradient(65% 65% at 50% 50%, rgba(45,27,54,.45) 0%, rgba(26,19,32,.2) 60%, rgba(18,14,22,0) 100%);
}

/* ============================================================
   Semantic typography roles
   Always paired with .lm-* base styles in markup
   ============================================================ */
.lm-display,
.lm-h1,
.lm-h2,
.lm-h3,
.lm-h4,
.lm-eyebrow,
.lm-wordmark { font-family: var(--lm-font-serif); color: var(--lm-fg-1); font-weight: 400; }

.lm-wordmark   { font-size: var(--lm-text-3xl); letter-spacing: var(--lm-track-widest); font-weight: 300; }
.lm-display    { font-size: var(--lm-text-display); letter-spacing: var(--lm-track-wide); line-height: 1.05; }
.lm-h1         { font-size: var(--lm-text-4xl); letter-spacing: var(--lm-track-wide); line-height: 1.1; }
.lm-h2         { font-size: var(--lm-text-3xl); letter-spacing: var(--lm-track-wide); line-height: 1.15; }
.lm-h3         { font-size: var(--lm-text-2xl); letter-spacing: var(--lm-track-wide); line-height: 1.2; }
.lm-h4         { font-size: var(--lm-text-xl); letter-spacing: var(--lm-track-wider); line-height: 1.3; text-transform: uppercase; }
.lm-eyebrow    { font-size: var(--lm-text-sm); letter-spacing: var(--lm-track-widest); text-transform: uppercase; color: var(--lm-fg-3); }

.lm-body       { font-family: var(--lm-font-sans); font-size: var(--lm-text-base); line-height: 1.65; color: var(--lm-fg-2); font-weight: 400; }
.lm-body-sm    { font-family: var(--lm-font-sans); font-size: var(--lm-text-sm); line-height: 1.6; color: var(--lm-fg-2); }
.lm-quote      { font-family: var(--lm-font-serif); font-style: italic; font-size: var(--lm-text-lg); color: var(--lm-fg-1); letter-spacing: var(--lm-track-wide); line-height: 1.5; }
.lm-label      { font-family: var(--lm-font-sans); font-size: var(--lm-text-sm); letter-spacing: var(--lm-track-wider); text-transform: uppercase; color: var(--lm-fg-3); }
.lm-mono       { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--lm-text-sm); color: var(--lm-fg-2); }