/* ============================================================
   LAUNCH7 — DESIGN TOKENS
   Two tiers, one rule: components reference SEMANTIC tokens only.
   Never a raw hex, never a base token, in a component rule.

   TIER 1 — BASE: raw values. Extracted from the live launch7.in
            stylesheet on 2026-08-04. Change a brand colour here.
   TIER 2 — SEMANTIC: what the value is FOR. Rename/retarget here
            and every component follows.

   THEMES — 2026-08-22. The site now ships light and dark. Tier 1
            is shared by both: the brand blue is ONE value and does
            not change between themes. Only Tier 2 is re-pointed,
            which is the entire reason the two-tier split exists.

            There is exactly ONE blue. Every blue on the site is
            #2424FF at some alpha; there is no second blue hex.

   Full rationale + the contrast table: _internal/docs/design-system.md
   ============================================================ */

:root{

  /* ---------------------------------------------------------
     TIER 1 — BASE  (shared by both themes)
     --------------------------------------------------------- */

  /* brand — confirmed from live CSS, not invented */
  /* ONE blue. #2424FF is the only blue value in the codebase — every
     other blue on the site is this same value at some alpha, never a
     second hex. Directive from Mayank, 2026-08-23.

     What that costs, stated plainly: blue can no longer be READ on the
     dark theme. #2424FF on #0D0D12 is 2.56:1, which fails AA text (4.5)
     and the non-text floor (3.0) alike. The old fix was a second,
     lighter blue; with one blue that option is gone. So blue is now a
     FILL-ONLY colour — buttons, the knock-out word, the logo, the core
     orb — where white sits on it at 7.58:1 in BOTH themes. Anything
     that used to be blue text on dark is white instead. */
  --l7-blue:        #2424FF;   /* the only blue. 7.58:1 vs white */
  --l7-ink:         #0D0D12;   /* near-black. never #000 */
  --l7-white:       #FFFFFF;
  --l7-paper:       #F1F0EA;   /* the warm tint the brand already owns */

  /* neutral ramp — derived from --l7-ink (hue ~240, desaturated,
     never a flat gray; see _internal/docs/design-system.md §Foundations)

     The ramp is not re-derived for dark. It inverts: the values that
     carry text on white are replaced by values from the other end of
     the same ramp, all measured against --l7-ink in the dark block. */
  --l7-gray-050:    #FAFAFB;
  --l7-gray-100:    #F3F3F5;
  --l7-gray-200:    #E7E7EB;
  --l7-gray-300:    #D4D4DA;   /* 13.13:1 on ink — dark-theme secondary text */
  --l7-gray-400:    #A3A3AD;   /* 2.50:1 on white, DECOR ONLY there.
                                  7.75:1 on ink — dark-theme muted text. */
  --l7-gray-500:    #70707A;   /* 4.90:1 on white, 4.70:1 on --bg-tint.
                                  Darkened from #75757F, which passed on white
                                  (4.60) but failed at 4.37 on the tint — the
                                  surface muted text actually sits on. */
  --l7-gray-600:    #4E4E58;   /* 8.2:1 on white — the workhorse secondary */
  --l7-gray-700:    #3A3A43;

  /* dark surfaces — an elevation ramp, not a palette. Three steps is
     the whole scale: the page, a card lifted off it, and a hairline.
     Every one is a tint of --l7-ink rather than a neutral gray, so the
     blue-violet cast holds across both themes. */
  --l7-ink-raised:  #14141B;   /* cards, panels */
  --l7-ink-tint:    #101017;   /* alternating section bands */
  --l7-ink-sunk:    #08080C;   /* the footer, and nothing else */

  /* type
     'Bricolage Fallback' sits between the webfont and the system stack: it is
     Segoe UI/Arial re-metricked to Bricolage's proportions (see base.css), so
     the swap when the webfont lands moves no line. Without it the swap reflows
     every heading on the page — the largest single source of CLS here. */
  --l7-font-sans:   'Bricolage Grotesque','Bricolage Fallback','Segoe UI',system-ui,-apple-system,sans-serif;
  --l7-font-mono:   'Space Mono','Courier New',monospace;

  /* ---------------------------------------------------------
     TIER 2 — SEMANTIC  ·  LIGHT THEME (the default)
     --------------------------------------------------------- */

  color-scheme: light;

  /* surfaces */
  --bg-page:            var(--l7-white);
  --bg-surface:         var(--l7-white);
  --bg-tint:            var(--l7-gray-050);   /* sparing section tint */
  --bg-tint-warm:       var(--l7-paper);      /* rarer still */
  --bg-accent-soft:     rgba(36,36,255,.05);   /* the one blue, at alpha */
  --bg-inverse:         var(--l7-ink);        /* small chips only, never a section */
  --bg-footer:          var(--l7-ink);

  /* text */
  --text-primary:       var(--l7-ink);
  --text-secondary:     var(--l7-gray-600);
  --text-muted:         var(--l7-gray-500);
  --text-accent:        var(--l7-blue);
  --text-on-accent:     var(--l7-white);
  --text-on-inverse:    var(--l7-white);

  /* lines */
  --border:             var(--l7-gray-200);
  --border-strong:      var(--l7-gray-300);
  --border-accent:      var(--l7-blue);
  /* The floating nav pills. No outline on these — the fill, the top
     highlight and the shadow draw the control instead, which is what
     stops them looking like wireframe boxes on a transparent bar.
     Because there is no border doing the work, the fill has to carry
     legibility on its own: at .72 alpha over the most hostile backdrop
     that can scroll beneath it, ink text still measures 11.46:1 here
     and white text 6.69:1 in dark. Measured, not assumed. */
  --pill-bg:            rgba(255,255,255,.72);
  --pill-hi:            rgba(255,255,255,.95);
  --pill-shadow:        0 6px 20px rgba(13,13,18,.10), 0 1px 2px rgba(13,13,18,.05);

  /* actions — primary is brand-filled, per directive.
     White on blue = 7.58:1. Blue text on white = 7.58:1. Both pass AA.  */
  --btn-primary-bg:     var(--l7-blue);
  --btn-primary-text:   var(--l7-white);
  --btn-primary-hover:  var(--l7-blue);        /* darkened by filter, not a 2nd blue */
  --btn-secondary-bg:   var(--l7-ink);
  --btn-secondary-text: var(--l7-white);
  --btn-secondary-hover:#22222B;
  --btn-ghost-text:     var(--l7-ink);
  --btn-ghost-border:   var(--l7-gray-300);
  --btn-ghost-hover-bg: var(--l7-gray-100);

  --focus-ring:         var(--l7-blue);       /* 7.58:1 vs white, >3:1 vs every surface */

  /* ---------------------------------------------------------
     GLASS + GLOW
     The reference boards are dark and lit. Both themes get the
     same components, so both need these — they are simply much
     quieter in light, where a glow on white reads as a smudge.
     --------------------------------------------------------- */
  --glass-bg:           rgba(13,13,18,.02);
  --glass-border:       rgba(13,13,18,.09);
  --glass-blur:         14px;
  --glass-hi:           rgba(255,255,255,.85);  /* top inner edge */
  --glow-core:          rgba(36,36,255,.13);    /* ambient radial, centre */
  --glow-edge:          rgba(36,36,255,0);      /* ambient radial, falloff */
  --grid-line:          rgba(13,13,18,.055);    /* wireframe + contour art */
  --grid-line-strong:   rgba(36,36,255,.22);

  /* radius */
  --radius-card:        22px;
  --radius-sm:          14px;
  --radius-chip:        12px;
  --radius-pill:        999px;

  /* depth — one ambient level, one lift. That is the entire scale. */
  --shadow-ambient:     0 1px 2px rgba(13,13,18,.04), 0 8px 24px rgba(13,13,18,.06);
  --shadow-lift:        0 2px 4px rgba(13,13,18,.06), 0 16px 40px rgba(13,13,18,.10);

  /* spacing — 8px base. Nothing off this scale, ever. */
  --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: 120px;

  /* section rhythm */
  --section-y:      clamp(56px, 9vw, 120px);
  --wrap:           1180px;
  --wrap-narrow:    760px;   /* ~65ch reading measure */

  /* type scale — 1.25 ratio, fluid at the top end */
  --font-sans:      var(--l7-font-sans);
  --font-mono:      var(--l7-font-mono);
  --step-h1:        clamp(2.5rem, 1.6rem + 3.6vw, 4rem);      /* 40 → 64 */
  --step-h2:        clamp(2rem, 1.5rem + 2vw, 3rem);          /* 32 → 48 */
  --step-h3:        clamp(1.25rem, 1.15rem + .4vw, 1.5rem);   /* 20 → 24 */
  --step-display:   clamp(2.75rem, 1.4rem + 5.4vw, 5.25rem);  /* 44 → 84, hero + CTA only */
  --step-body-lg:   1.25rem;
  --step-body:      1.125rem;   /* 18px — the directive's reading size */
  --step-sm:        1rem;
  --step-xs:        .875rem;
  --step-eyebrow:   .75rem;
  --step-metric:    clamp(2rem, 1.5rem + 2vw, 3rem);

  /* motion — every one of these is disabled under reduced-motion */
  --dur-fast:       160ms;
  --dur-base:       240ms;
  --dur-slow:       320ms;
  --ease:           cubic-bezier(.22,1,.36,1);
  --marquee-dur:    38s;
  --dur-theme:      200ms;   /* the light↔dark cross-fade */
}

/* ============================================================
   TIER 2 — SEMANTIC  ·  DARK THEME

   Applied by [data-theme="dark"] on <html>, which is set by the
   inline script in every page <head> before first paint. The
   media query below only supplies the default for a visitor who
   has never chosen — an explicit choice always wins, in both
   directions, which is why the query is guarded against
   [data-theme="light"].

   Nothing in here is a new brand colour. Every value is either a
   step on the existing ink ramp, a step on the existing gray
   ramp, or --l7-blue itself. The single addition is
   the single blue, used at alpha where a tint is wanted.
   ============================================================ */

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;

    --bg-page:            var(--l7-ink);
    --bg-surface:         var(--l7-ink-raised);
    --bg-tint:            var(--l7-ink-tint);
    --bg-tint-warm:       var(--l7-ink-tint);
    --bg-accent-soft:     rgba(36,36,255,.14);
    --bg-inverse:         var(--l7-white);
    --bg-footer:          var(--l7-ink-sunk);

    --text-primary:       var(--l7-white);      /* 19.38:1 */
    --text-secondary:     var(--l7-gray-300);   /* 13.13:1 */
    --text-muted:         var(--l7-gray-400);   /*  7.75:1 */
    --text-accent:        var(--l7-white);      /* 19.38:1 — blue is unreadable here */
    --text-on-accent:     var(--l7-white);      /*  7.58:1 on the blue fill */
    --text-on-inverse:    var(--l7-ink);

    --border:             rgba(255,255,255,.10);
    --border-strong:      rgba(255,255,255,.20);
    --pill-bg:            rgba(28,28,36,.72);      /* white text 6.69:1 worst case */
    --pill-hi:            rgba(255,255,255,.10);
    --pill-shadow:        0 8px 26px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
    --border-accent:      var(--l7-white);

    --btn-primary-bg:     var(--l7-blue);       /* unchanged. white on it, 7.58:1 */
    --btn-primary-text:   var(--l7-white);
    --btn-primary-hover:  var(--l7-blue);              /* lifts on hover here rather than
                                                   deepening — on near-black,
                                                   --l7-blue-deep reads as "disabled" */
    --btn-secondary-bg:   var(--l7-white);
    --btn-secondary-text: var(--l7-ink);
    --btn-secondary-hover:var(--l7-gray-200);
    --btn-ghost-text:     var(--l7-white);
    --btn-ghost-border:   rgba(255,255,255,.22);
    --btn-ghost-hover-bg: rgba(255,255,255,.07);

    --focus-ring:         var(--l7-white);      /* 19.38:1 vs page, >3:1 vs every surface */

    --glass-bg:           rgba(255,255,255,.045);
    --glass-border:       rgba(255,255,255,.10);
    --glass-hi:           rgba(255,255,255,.14);
    --glow-core:          rgba(36,36,255,.58);
    --glow-edge:          rgba(36,36,255,0);
    --grid-line:          rgba(255,255,255,.06);
    --grid-line-strong:   rgba(36,36,255,.44);

    --shadow-ambient:     0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.45);
    --shadow-lift:        0 2px 4px rgba(0,0,0,.55), 0 16px 44px rgba(0,0,0,.55);
  }
}

/* The explicit choice. Identical payload to the block above —
   duplicated rather than shared via a selector list because a
   selector list containing an unsupported selector invalidates
   the whole rule in older engines, and this is the one that has
   to work. */
:root[data-theme="dark"]{
  color-scheme: dark;

  --bg-page:            var(--l7-ink);
  --bg-surface:         var(--l7-ink-raised);
  --bg-tint:            var(--l7-ink-tint);
  --bg-tint-warm:       var(--l7-ink-tint);
  --bg-accent-soft:     rgba(36,36,255,.14);
  --bg-inverse:         var(--l7-white);
  --bg-footer:          var(--l7-ink-sunk);

  --text-primary:       var(--l7-white);
  --text-secondary:     var(--l7-gray-300);
  --text-muted:         var(--l7-gray-400);
  --text-accent:        var(--l7-white);      /* 19.38:1 — blue is unreadable here */
  --text-on-accent:     var(--l7-white);
  --text-on-inverse:    var(--l7-ink);

  --border:             rgba(255,255,255,.10);
  --border-strong:      rgba(255,255,255,.20);
  --pill-bg:            rgba(28,28,36,.72);      /* white text 6.69:1 worst case */
  --pill-hi:            rgba(255,255,255,.10);
  --pill-shadow:        0 8px 26px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
  --border-accent:      var(--l7-white);

  --btn-primary-bg:     var(--l7-blue);
  --btn-primary-text:   var(--l7-white);
  --btn-primary-hover:  var(--l7-blue);
  --btn-secondary-bg:   var(--l7-white);
  --btn-secondary-text: var(--l7-ink);
  --btn-secondary-hover:var(--l7-gray-200);
  --btn-ghost-text:     var(--l7-white);
  --btn-ghost-border:   rgba(255,255,255,.22);
  --btn-ghost-hover-bg: rgba(255,255,255,.07);

  --focus-ring:         var(--l7-white);

  --glass-bg:           rgba(255,255,255,.045);
  --glass-border:       rgba(255,255,255,.10);
  --glass-hi:           rgba(255,255,255,.14);
  --glow-core:          rgba(36,36,255,.58);
  --glow-edge:          rgba(36,36,255,0);
  --grid-line:          rgba(255,255,255,.06);
  --grid-line-strong:   rgba(36,36,255,.44);

  --shadow-ambient:     0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.45);
  --shadow-lift:        0 2px 4px rgba(0,0,0,.55), 0 16px 44px rgba(0,0,0,.55);
}

/* ============================================================
   DEMO CHROME  ·  DEPRECATED 2026-08-22
   Depicting someone else's UI (a phone running WhatsApp) needed
   that UI's colours. The agent pages these belong to are being
   retired with the AI-operations positioning; this block goes
   with the last page that references it. Do not use in new work.
   ============================================================ */
:root{
  --device-frame:       #1C1C1E;
  --device-edge:        #48484A;
  --wa-canvas:          #EFE7DE;
  --wa-bar:             #F7F5F3;
  --wa-in:              #FFFFFF;
  --wa-out:             #D9FDD3;
  --wa-text:            #111B21;
  --wa-meta:            #667781;
  --wa-tick:            #34B7F1;
  --wa-line:            rgba(17,27,33,.09);
}