/* ====================================================================
   LOUAR STUDIO — Design Tokens (v2 · Acid Lime palette)
   Source palette: #ecffb6 · #d6fb00 · #00545f
   ==================================================================== */

:root {
  /* ── Foundation neutrals (teal-shifted) ────────────────────── */
  --ink-1000: #02161A;   /* primary background */
  --ink-900:  #052228;   /* section backgrounds */
  --ink-800:  #073038;   /* elevated surfaces */
  --ink-700:  #0E3F47;   /* borders on dark */
  --ink-600:  #00545F;   /* palette deep teal — hover fills, accent surface */
  --smoke-500:#5E7A7F;   /* muted body */
  --smoke-300:#98AEB0;   /* secondary text */
  --bone-100: #E8EEE5;   /* body text on dark */
  --bone-50:  #F1F4ED;
  --pure-white:#FFFFFF;

  /* ── Acid lime accent (renamed from "ember" but aliased) ──── */
  --lime-600:  #B5D400;
  --lime-500:  #D6FB00;        /* primary — palette mid */
  --lime-400:  #E2FC4A;
  --lime-300:  #ECFFB6;        /* palette pale */
  --lime-glow: rgba(214, 251, 0, 0.40);

  /* Backwards-compat aliases so all existing component CSS still works. */
  --ember-600: var(--lime-600);
  --ember-500: var(--lime-500);
  --ember-400: var(--lime-400);
  --ember-300: var(--lime-300);
  --ember-glow:var(--lime-glow);

  /* ── Aurora (kept for Tweaks "aurora" mood) ───────────────── */
  --aurora-blue:    #3D6BFF;
  --aurora-violet:  #7B4DFF;
  --aurora-magenta: #E63F8E;
  --aurora-amber:   #FFA94D;
  --aurora-teal:    #1FD4B8;

  /* ── Functional ───────────────────────────────────────────── */
  --success:#3DDC97; --warning:#FFC857; --error:#FF5A5F; --info:#5BC0EB;

  /* ── Typography ───────────────────────────────────────────── */
  --font-display: 'Inter Tight','Inter','Helvetica Neue',Arial,sans-serif;
  --font-body:    'Inter',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-mono:    'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
  --font-serif:   'Fraunces','Times New Roman',serif;

  --text-display-2xl: clamp(3.25rem, 7.5vw, 6rem);
  --text-display-xl:  clamp(2.75rem, 6vw, 4.5rem);
  --text-display-lg:  clamp(2.25rem, 4.8vw, 3.5rem);
  --text-display-md:  clamp(1.75rem, 3.5vw, 2.5rem);
  --text-h1:   2rem;
  --text-h2:   clamp(1.5rem, 2.4vw, 2rem);
  --text-h3:   1.25rem;
  --text-body-lg: 1.125rem;
  --text-body:    1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;

  /* ── Spacing (4px base) ───────────────────────────────────── */
  --space-1:4px;  --space-2:8px;   --space-3:12px;
  --space-4:16px; --space-5:24px;  --space-6:32px;
  --space-7:48px; --space-8:64px;  --space-9:96px;
  --space-10:128px;--space-11:160px;

  /* ── Radii ────────────────────────────────────────────────── */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px;
  --radius-lg:16px; --radius-xl:24px; --radius-2xl:32px;
  --radius-pill:9999px;

  /* ── Shadow & Glow ────────────────────────────────────────── */
  --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:0 12px 48px rgba(0,0,0,0.6);
  --glow-lime:   0 0 40px rgba(214,251,0,0.45), 0 0 80px rgba(214,251,0,0.22);
  --glow-ember:  var(--glow-lime);      /* alias */
  --glow-aurora: 0 0 60px rgba(123,77,255,0.4),  0 0 120px rgba(61,107,255,0.25);
  --glow-soft:   0 0 24px rgba(236,255,182,0.10);

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:150ms; --dur-base:250ms; --dur-slow:400ms; --dur-hero:600ms;

  /* ── Atmosphere intensity (tweakable) ─────────────────────── */
  --glow-intensity: 1;
  --hairline:        1px solid rgba(232,238,229,0.07);
  --hairline-strong: 1px solid rgba(232,238,229,0.14);

  /* ── Layout ───────────────────────────────────────────────── */
  --content-max: 1280px;
  --hero-max:    1440px;
}