/* ============================================================================
   Vaios design tokens — the single source of truth for the brand.
   Loaded BEFORE theme.css on every marketing page (order: style.css →
   tokens.css → theme.css). Any future page that links tokens.css + theme.css
   inherits the whole Vaios brand automatically — colours, type, spacing,
   radius, shadows, gradients, focus, and motion. Don't hard-code brand values
   in a page; reference a token here.
   NOTE: setup.html deliberately links ONLY style.css and stays on the
   barbershop-red default — it never loads this file. Keep it that way.
   ========================================================================== */
:root{
  /* ---- Raw brand palette --------------------------------------------------
     Surfaces climb from the page background up through elevated → card → form. */
  --c-bg:        #050816;   /* page background            */
  --c-bg-elev:   #0B1020;   /* elevated background        */
  --c-surface:   #11172A;   /* card surface               */
  --c-surface-2: #171D32;   /* form surface               */
  --c-field:     #080B15;   /* input background           */
  --c-border:    #28304A;   /* hairline borders           */
  --c-ink:       #F7F8FC;   /* primary text               */
  --c-muted:     #A7AEC3;   /* secondary text             */
  --c-link:      #9DB0FF;   /* readable link on dark (periwinkle) */

  /* accent hues */
  --c-blue:      #00C8FF;
  --c-blue-deep: #1677FF;
  --c-purple:    #7357FF;
  --c-fuchsia:   #E13CFF;
  --c-pink:      #FF4FCB;
  --c-success:   #39D98A;

  /* ---- Gradients ----------------------------------------------------------
     --grad-brand : the full cyan→fuchsia signature. Decorative use only —
                    topbar, thin dividers, highlighted words, glows, icons.
     --grad-cta   : the button fill. Drops the brightest cyan so WHITE bold
                    text clears WCAG AA-large across every stop. */
  --grad-brand: linear-gradient(90deg,#00C8FF 0%,#1677FF 35%,#7357FF 68%,#E13CFF 100%);
  --grad-brand-135: linear-gradient(135deg,#00C8FF 0%,#1677FF 35%,#7357FF 68%,#E13CFF 100%);
  --grad-cta: linear-gradient(100deg,#1677FF 0%,#7357FF 55%,#E13CFF 100%);

  /* ---- Typography ---------------------------------------------------------
     Serif headlines (kept), system sans body, mono for codes. */
  --font-serif: Georgia,"Iowan Old Style","Times New Roman",serif;
  --font-sans:  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:  ui-monospace,Menlo,Consolas,"Courier New",monospace;

  --text-eyebrow: 12.5px;
  --lh-tight: 1.15;
  --lh-body: 1.65;

  /* ---- Spacing scale (4px base) ------------------------------------------ */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* ---- Border radius ------------------------------------------------------ */
  --r-sm: 6px;  --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* ---- Shadows (minimal, per brief) -------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 12px 40px rgba(0,0,0,.5);
  --shadow-cta: 0 8px 26px rgba(22,119,255,.35);
  --shadow-cta-hover: 0 12px 34px rgba(115,87,255,.45);

  /* ---- Focus ring (brand, high-contrast, keyboard-visible) --------------- */
  --focus-ring: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-blue);

  /* ---- Motion ------------------------------------------------------------- */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur-fast: .15s; --dur: .25s; --dur-slow: .45s;
  --transition:
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}