@charset "UTF-8";
/* FlexVPN landing tokens — Premium Dark with Coral (PR-5, 2026-05-05).
   Pivot from cream-light to rich charcoal that translates 1:1 to mobile-app
   dark theme later. Coral preserved as brand thread (warmer hue on dark bg).
   Per stitch-skill / taste-skill rules: NO Inter, NO pure black, NO emojis,
   variance 8 (asymmetric layouts), motion 6 (spring micro-interactions). */

:root {
    /* Surfaces — rich dark with violet tint (PR-6: magenta brand pivot) */
    --bg:            #0C0A12;          /* canvas — slight violet undertone for magenta cohesion */
    --bg-elev-1:     #15121E;          /* card surface */
    --bg-elev-2:     #1F1A2D;          /* hover / nested */
    --bg-tint:       #18142233;        /* alternating section overlay */
    --bg-glass:      rgba(21, 18, 30, 0.72);  /* nav blur surface */

    /* Borders */
    --border:        rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 45, 170, 0.24);
    --border-bright: rgba(255, 255, 255, 0.10);
    --border-inner:  inset 0 1px 0 rgba(255, 255, 255, 0.04);  /* glass refraction */

    /* Text — warm whites (NOT pure #FFF) */
    --text:          #F4F2FA;
    --text-muted:    #9690A8;
    --text-dim:      #635C75;
    --text-faint:    #3F394A;

    /* Accent — Deep Rose at sat 76% per taste-skill Rule 2 (was #FF2DAA at
       100% in PR-6 — desaturated to land below the neon-zone threshold while
       keeping the bold/derzkii character. Both hex AND rgba updated). */
    --accent:        #E94299;
    --accent-deep:   #C9357F;          /* hover */
    --accent-soft:   rgba(233, 66, 153, 0.10);
    --accent-tint:   rgba(233, 66, 153, 0.06);
    --accent-glow:   rgba(233, 66, 153, 0.30);
    --accent-ink:    #1A0509;          /* near-black on magenta fill */

    /* Gradient pair — used ONCE on hero emphasis word + ring stroke */
    --grad-from:     #E94299;
    --grad-to:       #8E60E6;
    --grad-text:     linear-gradient(135deg, #E94299 0%, #B84DCE 50%, #6E80E6 100%);
    --grad-ring:     conic-gradient(from 220deg, #E94299, #8E60E6, #6E80E6, #E94299);

    /* Secondary glow — used sparingly in hero gradient mesh */
    --aurora-1:      rgba(233, 66, 153, 0.22);  /* magenta */
    --aurora-2:      rgba(142, 96, 230, 0.16);  /* violet */

    /* Status (live data only — never decoration) */
    --ok:            #34D399;
    --warn:          #FBBF24;
    --err:           #F87171;

    /* Typography — Outfit (display) + Onest (body), JetBrains Mono (code only).
       Inter explicitly avoided per taste-skill / stitch-skill premium rules. */
    --font-display:  'Outfit', 'Onest', system-ui, -apple-system, sans-serif;
    --font-body:     'Onest', system-ui, -apple-system, sans-serif;
    --font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Type scale — controlled, not screaming (taste-skill: "NO Oversized H1s
       — control hierarchy with weight and color, not just massive scale"). */
    --text-h1:       clamp(38px, 4.6vw, 60px);
    --text-h2:       clamp(28px, 3.2vw, 40px);
    --text-h3:       22px;
    --text-body:     16px;
    --text-small:    14px;
    --text-meta:     13px;

    /* Spacing scale */
    --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;

    /* Radii — generous (per stitch-skill: "generously rounded corners") */
    --r-sm:          8px;
    --r-md:          14px;
    --r-lg:          20px;
    --r-xl:          28px;
    --r-2xl:         40px;
    --r-pill:        999px;

    /* Shadows — multi-layer depth tokens (PR-9: replace pure-black drops with
       ink-violet-tinted shadows per taste-skill Rule 4 "tint shadows to bg hue".
       Plain --shadow-* tokens kept for backward compat with PR-1...8 styles). */
    --shadow-sm:     0 1px 2px rgba(11, 8, 22, 0.40);
    --shadow-md:     0 4px 16px rgba(11, 8, 22, 0.46), 0 1px 3px rgba(11, 8, 22, 0.28);
    --shadow-lg:     0 16px 48px rgba(11, 8, 22, 0.50), 0 4px 12px rgba(11, 8, 22, 0.30);
    --shadow-magenta:0 12px 32px rgba(233, 66, 153, 0.28), 0 2px 6px rgba(233, 66, 153, 0.18);
    --shadow-glass:  0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 8px 32px rgba(11, 8, 22, 0.46);

    /* PR-9 multi-layer depth tokens — used for product surfaces (cards,
       device-mockups, pricing). Three stops + inset highlight for "expensive
       glass" feel. All ink-violet tinted, zero pure black. */
    --depth-2:       0 4px 12px rgba(11, 8, 22, 0.46),
                     0 1px 2px rgba(11, 8, 22, 0.30),
                     inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --depth-3:       0 12px 32px rgba(11, 8, 22, 0.54),
                     0 4px 12px rgba(11, 8, 22, 0.34),
                     inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --depth-4:       0 24px 64px rgba(11, 8, 22, 0.60),
                     0 8px 24px rgba(11, 8, 22, 0.42),
                     inset 0 1px 0 rgba(255, 255, 255, 0.08);

    /* Container */
    --container:     1240px;
    --container-pad: 32px;

    /* Section padding — generous (DENSITY 4) */
    --section-pad:   var(--space-10);

    /* Spring transitions (motion-skill: spring physics, no linear) */
    --spring:        180ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast:        120ms cubic-bezier(0.4, 0, 0.2, 1);
    --t:             220ms cubic-bezier(0.16, 1, 0.3, 1);
    --t-slow:        420ms cubic-bezier(0.16, 1, 0.3, 1);

    /* ========================================================================
       GLASS PRIMITIVES (PR-1 foundation, 2026-05-16)
       Aurora Glass design language. Layered model:
       L0 = canvas (existing --bg + aurora-mesh utility from glass.css)
       L1 = frosted glass surfaces (.glass-pane / .glass-card / .glass-nav)
       L2 = near-solid for dense data (admin tables — uses --bg-elev-1, no blur)
       See docs/superpowers/specs/2026-05-16-aurora-glass-foundation-design.md
       ======================================================================== */

    /* Glass tints — alpha-on-white over canvas */
    --glass-tint-1:   rgba(255, 255, 255, 0.04);   /* hairline (rare) */
    --glass-tint-2:   rgba(255, 255, 255, 0.06);   /* standard card */
    --glass-tint-3:   rgba(255, 255, 255, 0.09);   /* elevated (nav-over-hero, modal) */

    /* Glass strokes & inner refraction */
    --glass-stroke:   rgba(255, 255, 255, 0.10);
    --glass-inner:    inset 0 1px 0 rgba(255, 255, 255, 0.06);

    /* Glass depth shadow (drops surfaces from background plane) */
    --glass-shadow:   0 24px 48px -16px rgba(0, 0, 0, 0.55),
                      0 4px 12px -2px rgba(0, 0, 0, 0.30);

    /* Blur scale — small set, no proliferation */
    --glass-blur-sm:  8px;    /* tooltips, badges, chips */
    --glass-blur-md:  16px;   /* default card / panel */
    --glass-blur-lg:  24px;   /* sticky nav, sheets */
    --glass-blur-xl:  40px;   /* hero featured surface */

    /* Saturation boost — keeps colors lively under blur */
    --glass-sat:      140%;

    /* Aurora mesh palette (canvas-level, behind glass) */
    --aurora-mag:     #E94299;
    --aurora-vio:     #8E60E6;
    --aurora-blu:     #6E80E6;
}

@media (max-width: 720px) {
    :root {
        --container-pad: 20px;
        --section-pad:   72px;
    }
}