/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — the single source of truth for colour, type, space and motion.
   Every other stylesheet reads from here. Change a brand colour once, here.

   The dark palette is sampled directly from the SkyLift Marketing homepage:
     #000000  page background
     #10162E  the navy bloom behind the hero
     #192248  footer navy
     #2D62FD  the royal blue on "Get My FREE Training"
     #F5C518  the gold in "Sell Coaching, Courses & D2C Products" + the logo flag
   The light palette is derived from it — the site itself is dark-only, so light
   mode keeps the same blue/gold accents on paper-white surfaces.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand constants (identical in both themes) ───────────────────────── */
  --gold:            #f5c518;
  --gold-strong:     #f7d201;
  --blue:            #2d62fd;
  --blue-lift:       #5c8aff;   /* lighter blue — readable on black */
  --navy:            #10162e;
  --navy-deep:       #192248;

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale — clamp() means zero media queries for headings. */
  --t-display: clamp(2.35rem, 1.35rem + 4.4vw, 4.6rem);
  --t-h1:      clamp(1.95rem, 1.3rem + 2.7vw, 3.1rem);
  --t-h2:      clamp(1.5rem, 1.15rem + 1.5vw, 2.1rem);
  --t-h3:      clamp(1.12rem, 1rem + 0.5vw, 1.35rem);
  --t-lead:    clamp(1.02rem, 0.96rem + 0.35vw, 1.2rem);
  --t-body:    1rem;
  --t-sm:      0.875rem;
  --t-xs:      0.78rem;

  --lh-tight:  1.08;
  --lh-snug:   1.32;
  --lh-body:   1.62;
  --track-tight: -0.022em;
  --track-wide:  0.14em;

  /* ── Space (4px base) ─────────────────────────────────────────────────── */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.75rem;  --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8.5rem;

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  26px;
  --r-pill: 999px;

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);      /* the "expo out" everyone loves */
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --d-fast: 140ms;
  --d-base: 260ms;
  --d-slow: 520ms;

  --shell:  min(1120px, 100% - 2.5rem);
  --shell-narrow: min(720px, 100% - 2.5rem);
}

/* ═══════════════════════════════ DARK (default) ═══════════════════════════ */
:root,
:root[data-theme="dark"] {
  --bg:            #000000;
  --bg-raise:      #05070c;
  --surface:       #0a0d16;
  --surface-2:     #0e1220;
  --surface-hover: #121729;

  --line:          rgba(255, 255, 255, 0.09);
  --line-strong:   rgba(255, 255, 255, 0.16);

  --text:          #f4f6fb;
  --text-2:        #a7b0c4;
  --text-3:        #6e7893;

  --accent:        var(--blue-lift);   /* readable blue for text on black */
  --accent-solid:  var(--blue);        /* fills, bars, focus */
  --accent-ink:    #ffffff;            /* text on --accent-solid */

  --cta-bg:        #ffffff;            /* the white pill from the homepage */
  --cta-ink:       #06080f;

  /* Gold as *text*. On black the brand gold is a 12.9:1 contrast — use it as-is. */
  --gold-ink:      var(--gold);

  --glow-1: rgba(45, 98, 253, 0.30);
  --glow-2: rgba(16, 22, 46, 0.95);

  --glass:         rgba(18, 21, 32, 0.62);
  --glass-line:    rgba(255, 255, 255, 0.10);

  /* The logo is white-on-dark in the site header, navy-on-light in the
     standalone lockup. One token, flipped per theme. */
  --brand-ink:     #ffffff;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35);
  --shadow-md: 0 2px 6px rgba(0,0,0,.5), 0 16px 44px rgba(0,0,0,.5);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.55), 0 34px 90px rgba(0,0,0,.62);
  --shadow-cta: 0 10px 30px rgba(255,255,255,.10);

  --ok:   #34d399;
  --warn: #fbbf24;
  --err:  #ff7a85;

  color-scheme: dark;
}

/* ═══════════════════════════════ LIGHT ════════════════════════════════════ */
:root[data-theme="light"] {
  --bg:            #ffffff;
  --bg-raise:      #fbfcfe;
  --surface:       #ffffff;
  --surface-2:     #f5f7fb;
  --surface-hover: #eef2f9;

  --line:          rgba(10, 16, 34, 0.10);
  --line-strong:   rgba(10, 16, 34, 0.18);

  --text:          #080b14;
  --text-2:        #4c5568;
  --text-3:        #7d8697;

  --accent:        #1c4fe0;            /* darkened for AA on white */
  --accent-solid:  var(--blue);
  --accent-ink:    #ffffff;

  --cta-bg:        #080b14;            /* light mode flips the pill to ink */
  --cta-ink:       #ffffff;

  --glow-1: rgba(45, 98, 253, 0.13);
  --glow-2: rgba(214, 226, 255, 0.75);

  --glass:         rgba(255, 255, 255, 0.72);
  --glass-line:    rgba(10, 16, 34, 0.09);

  /* The navy from the standalone SkyLift lockup. */
  --brand-ink:     #232d63;

  --shadow-sm: 0 1px 2px rgba(12,18,38,.05), 0 3px 10px rgba(12,18,38,.05);
  --shadow-md: 0 2px 6px rgba(12,18,38,.06), 0 14px 36px rgba(12,18,38,.09);
  --shadow-lg: 0 4px 12px rgba(12,18,38,.07), 0 30px 76px rgba(12,18,38,.12);
  --shadow-cta: 0 10px 26px rgba(8,11,20,.18);

  --ok:   #0f9d6d;
  --warn: #b7791f;
  --err:  #d0384a;

  color-scheme: light;
}

/* Respect the OS "reduce motion" setting everywhere at once. */
@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; }
}