/* ═══════════════════════════════════════════════════════════════════════════
   sk-tokens.css — the Skylor marketing token layer
   ───────────────────────────────────────────────────────────────────────────
   OWNS:      the `--sk-*` custom properties every new marketing component reads.
   NEVER:     selectors. This file declares tokens and nothing else, so it can be
              loaded first and read by any later file without cascade surprises.

   WHY A NEW FILE
   `static/landing/css/landing.css` is 6,035 lines carrying 544 `!important`
   declarations across 36 distinct breakpoints. Rules in it cannot be overridden
   predictably, which cost three separate fixes in one session. The redesign
   therefore authors new files under a fresh `.sk-` namespace that landing.css
   has no selector for, and removes the old class from the element rather than
   fighting it. The old rules stay in place, unused, and are retired in stages —
   tracked in PRIVATE_DOCS/v3/landing_css_retirement_ledger.md.

   DO NOT add `!important` here or in any sk-*.css file. `landing/test_sk_css.py`
   fails the build if you do, and fails it if landing.css grows.

   COLOURS
   Every value below resolves to an existing landing.css token. No new hex is
   introduced (UI_STANDARDS Part 3 — tokens only). The `--sk-*` names exist so
   the remaining redesign items read one contract instead of re-deriving values.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Buttons ───────────────────────────────────────────────────────────
       One compact height everywhere, three sizes, widths free.
       40px is the nav / inline default; 48px is a page-level CTA; 32px is for
       dense contexts such as the mobile navbar pill.
       Replaces a `.btn-cta-primary` that carried 54 / 50! / 48 / 44! / 40! px
       from four separate top-level declarations. */
    --sk-btn-h:            40px;
    --sk-btn-h-lg:         48px;
    --sk-btn-h-sm:         32px;

    --sk-btn-pad-x:        20px;
    --sk-btn-pad-x-lg:     28px;
    --sk-btn-pad-x-sm:     14px;

    --sk-btn-fs:           0.9375rem;   /* 15px */
    --sk-btn-fs-lg:        1rem;        /* 16px */
    --sk-btn-fs-sm:        0.875rem;    /* 14px — above the 12px floor */
    --sk-btn-fw:           600;
    --sk-btn-radius:       var(--radius-sm);
    --sk-btn-gap:          8px;

    /* Minimum touch target at ≤991px. Applied via a centred ::after overlay so
       the visual box stays 40px while the tappable area is 44px — the density
       contract established by the mobile track. */
    --sk-touch-min:        44px;

    /* ── Navbar ────────────────────────────────────────────────────────────
       These MUST match the heights landing.css already applies, because nine
       separate hero/legal rules compute their top padding from `--nav-height`.
       Changing them shifts every hero on the site. Breakpoints mirrored from
       landing.css:3647 (≤991 → 56px) and landing.css:4598 (≤767 → 54px). */
    --sk-nav-h:            68px;
    --sk-nav-pad-x:        var(--container-pad);
    --sk-nav-gap:          4px;
    --sk-nav-bg:           var(--bg-body);
    --sk-nav-border:       var(--border-color);
    --sk-nav-link:         var(--text-secondary);
    --sk-nav-link-hover:   var(--text-main);
    --sk-nav-shadow:       var(--shadow-sm);
    /* Matches the legacy .landing-navbar z-index so stacking against the hero
       showcase, drawers and the Turnstile widget behaves exactly as before. */
    --sk-nav-z:            1050;

    /* ── Mega menu ─────────────────────────────────────────────────────────── */
    --sk-mega-w:           760px;
    --sk-mega-pad:         20px;
    --sk-mega-radius:      var(--radius-md);
    --sk-mega-shadow:      var(--shadow-lg);
    --sk-mega-z:           1049;   /* below the bar, above the page */

    /* ── Drawer (mobile) ───────────────────────────────────────────────────
       Must sit ABOVE the navbar. The navbar is position:fixed at 1050, so a
       drawer below that painted underneath it and the brand, the CTA pill and
       the burger bled through the open panel. */
    --sk-drawer-w:         min(320px, 86vw);
    --sk-drawer-z:         1060;
    --sk-drawer-backdrop-z: 1059;
    --sk-drawer-backdrop:  rgba(15, 23, 42, 0.45);   /* --bg-dark @ 45% */

    /* ── Motion ────────────────────────────────────────────────────────────
       Clamped globally by prefers-reduced-motion in each component file. */
    --sk-transition:       160ms ease;
    --sk-transition-panel: 200ms ease;
}

@media (max-width: 991px) {
    :root { --sk-nav-h: 56px; }
}

@media (max-width: 767px) {
    :root { --sk-nav-h: 54px; }
}