/* ============================================================================
   noem.ai — Design Tokens  (single source of truth)
   Premium · dark-mode · vibrant gradients · typography-forward · bento · motion
   Consumed by: components.css, brand-guide.html, and the WordPress theme.
   Mirror these into the Elementor Global Kit (post 1316) so native widgets inherit them.
   ============================================================================ */

:root {
  /* ---------- SURFACES (dark) ---------- */
  --bg-deep:   #07080c;   /* page background */
  --bg-base:   #0b0d13;   /* default section */
  --bg-elev:   #11141d;   /* raised card */
  --bg-elev-2: #161a26;   /* popover / nested */
  --bg-glass:  rgba(20, 23, 34, 0.55);   /* glass fill (use with --blur) */

  /* ---------- INK (text on dark) ---------- */
  --ink:       #f4f6fb;   /* headings / primary */
  --ink-80:    #d8dce6;   /* strong body */
  --ink-60:    #a3aab9;   /* body */
  --ink-40:    #777e91;   /* muted / captions */
  --ink-30:    #555b6c;   /* disabled */

  /* ---------- BRAND ---------- */
  --indigo:    #4D61FE;   /* primary action */
  --violet:    #A45CE0;
  --magenta:   #C160E2;
  --periwinkle:#A5AFF6;   /* soft accent / highlights */
  --indigo-ink:#0F1640;   /* deep brand ink for light contexts */

  /* ---------- STATUS ---------- */
  --success:   #46E08A;
  --warning:   #FCBB03;
  --danger:    #F14A63;

  /* ---------- GRADIENTS (vibrant) ---------- */
  --grad-brand:  linear-gradient(120deg, #4D61FE 0%, #A45CE0 55%, #C160E2 100%);
  --grad-brand-soft: linear-gradient(120deg, rgba(77,97,254,.18), rgba(193,96,226,.14));
  --grad-cool:   linear-gradient(120deg, #4D61FE 0%, #A5AFF6 100%);
  --grad-hot:    linear-gradient(120deg, #A45CE0 0%, #FF6FB1 100%);
  --grad-text:   linear-gradient(100deg, #A5AFF6 0%, #A45CE0 55%, #C160E2 100%);
  --glow-brand:  radial-gradient(60% 60% at 50% 0%, rgba(164,92,224,.22), transparent 70%);
  --glow-indigo: radial-gradient(50% 50% at 50% 50%, rgba(77,97,254,.28), transparent 70%);
  --grad-border: linear-gradient(120deg, rgba(165,175,246,.6), rgba(193,96,226,.5));

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: var(--font-sans);

  /* fluid type scale (min → max). NOTE: expressed in px, NOT rem — the live
     WordPress theme sets html{font-size:62.5%} (10px root), which shrinks any
     rem-based size to ~62%. px keeps the scale identical on the site AND in the
     brand guide. */
  --fs-display: clamp(48px, 25.6px + 5.6vw, 88px);   /* hero headline */
  --fs-h1:      clamp(40px, 25.6px + 3.6vw, 64px);
  --fs-h2:      clamp(32px, 22.4px + 2.4vw, 48px);
  --fs-h3:      clamp(24px, 19.2px + 1.2vw, 32px);
  --fs-h4:      clamp(20px, 17.6px + 0.5vw, 24px);
  --fs-lead:    clamp(18px, 16.8px + 0.4vw, 22px);
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-mono:    13px;   /* eyebrow / labels */

  --fw-regular: 400;  --fw-medium: 500;  --fw-semibold: 600;  --fw-bold: 700;  --fw-black: 800;
  --lh-tight: 1.04;  --lh-snug: 1.15;  --lh-normal: 1.6;  --lh-relaxed: 1.75;
  --tracking-tight: -0.02em;  --tracking-display: -0.035em;  --tracking-wide: 0.12em;

  /* ---------- SPACING (4px base) ---------- px, not rem (see type-scale note) */
  --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;
  --section-pad: clamp(64px, 32px + 6vw, 128px);   /* vertical section rhythm */
  --container:  1200px;   /* content max-width */
  --container-narrow: 760px;

  /* ---------- RADII ---------- */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* ---------- BORDERS / HAIRLINES ---------- */
  --line-1: rgba(255,255,255,.06);
  --line-2: rgba(255,255,255,.10);
  --line-3: rgba(255,255,255,.16);

  /* ---------- SHADOWS ---------- */
  --shadow-sm:  0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-md:  0 1px 0 rgba(255,255,255,.05) inset, 0 24px 64px -28px rgba(0,0,0,.78);
  --shadow-lg:  0 1px 0 rgba(255,255,255,.06) inset, 0 48px 120px -40px rgba(0,0,0,.86);
  --shadow-glow:0 0 0 1px rgba(164,92,224,.35), 0 18px 50px -12px rgba(164,92,224,.45);

  /* ---------- GLASS / BLUR ---------- */
  --blur: 16px;
  --blur-strong: 28px;

  /* ---------- MOTION ---------- */
  --dur-fast: 160ms;  --dur-base: 280ms;  --dur-slow: 560ms;  --dur-xslow: 900ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Z-INDEX ---------- */
  --z-base: 1;  --z-raised: 10;  --z-sticky: 100;  --z-header: 300;  --z-overlay: 800;  --z-modal: 1000;

  /* ---------- BREAKPOINTS (reference; use in @media) ---------- */
  /* --bp-sm: 640px;  --bp-md: 768px;  --bp-lg: 1024px;  --bp-xl: 1280px; */
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; --dur-xslow:0ms; }
}

/* ---------- GOLD accent + atmospheric background (from app.noem.ai) ---------- */
:root{
  --gold: #FFCC70;
  /* the signature indigo -> magenta -> gold gradient */
  --grad-signature: linear-gradient(135deg, #4158D0 0%, #C850C0 48%, #FFCC70 100%);
  --grad-signature-soft: linear-gradient(135deg, rgba(65,88,208,.14) 0%, rgba(200,80,192,.08) 48%, rgba(255,204,112,.10) 100%);
  /* full-page atmosphere: corner glows + diagonal wash over the dark base (keeps bg from being flat) */
  --bg-atmosphere:
    radial-gradient(circle at 88% -2%, rgba(255,204,112,0.18), transparent 36%),
    radial-gradient(circle at 2% 1%,  rgba(77,97,254,0.20),  transparent 42%),
    radial-gradient(circle at 82% 102%, rgba(200,80,192,0.16), transparent 48%),
    linear-gradient(135deg, rgba(65,88,208,0.06) 0%, rgba(200,80,192,0.045) 50%, rgba(255,204,112,0.04) 100%);
}