/* ==========================================================================
   VANTRIX — tokens.css
   The Vantrix design system. Nothing here renders anything by itself —
   every other stylesheet reads from this file, so it is always linked
   first.

   This file is the actual system definition, not documentation of one —
   spacing, type, elevation, glow, blur, motion, and icon sizing are all
   named scales here, not one-off values scattered per component.

   Two materials on purpose: a disciplined, mostly-flat structural
   language (grid, hairlines, mono labels, sharp small-radius data
   surfaces) for almost everything, and ONE reserved glow/glass material
   (--glow-signal, --glass-violet) for the brand mark, the primary CTA,
   and a small number of signature moments. The restraint is what makes
   the glow read as premium instead of decorative — seven glowing panels
   on one screen is wallpaper, three is a signal.

   Legacy short names (--t, --ease, --shadow-md, ...) are kept and aliased
   to the new scale rather than renamed everywhere at once — every
   existing rule keeps working, and new code reaches for the named scale
   directly.

   01. Color — brand, surface, text, line
   02. Radius
   03. Spacing scale
   04. Type scale
   05. Elevation + glow + blur
   06. Motion — duration, easing, stagger
   07. Icon sizing
   08. Layout
   09. Type stacks
   10. Runtime values (written by js/main.js)
   ========================================================================== */

:root {
  /* ==========================================================================
     01. Color — pulled from the logo mark: vivid violet through lavender to
     white, sitting on near-pure black. --bg is deliberately close to #000
     so the logo's own black field blends away under
     `mix-blend-mode: screen` instead of showing as a box.
     ========================================================================== */

  --accent: #7c3aed;
  --accent-2: #a855f7;
  --accent-3: #c084fc;
  --accent-4: #e9d5ff;
  --accent-ink: #f0e6ff;

  /* Light end of the primary-button gradient. Deliberately a shade darker
     than --accent-2: white on #a855f7 lands at 3.96:1, under the 4.5:1
     WCAG floor, and a gradient is only as accessible as its lightest
     point. #9f45f0 measures 4.58:1 and is visually near-identical.
     --accent-2 is still used for glows and washes, where it carries no
     text and the limit doesn't apply. */
  --accent-cta-2: #9f45f0;

  --accent-a08: rgba(124, 58, 237, 0.08);
  --accent-a16: rgba(124, 58, 237, 0.16);
  --accent-a28: rgba(124, 58, 237, 0.28);
  --accent-a45: rgba(139, 92, 246, 0.45);
  --accent-a60: rgba(139, 92, 246, 0.6);

  /* Badge semantic colors — deliberately outside the violet accent ramp
     above, one hue per badge meaning, so profile badges read apart from
     each other at a glance instead of all being "the brand color again".
     Verified stays on-brand violet (--accent-3) since the checkmark next
     to a name is already an established brand signal elsewhere. */
  --badge-admin: #60a5fa;
  --badge-admin-bg: rgba(96, 165, 250, 0.14);
  --badge-admin-line: rgba(96, 165, 250, 0.35);

  --badge-founder: #fb7185;
  --badge-founder-bg: rgba(251, 113, 133, 0.14);
  --badge-founder-line: rgba(251, 113, 133, 0.35);

  --badge-early: #2dd4bf;
  --badge-early-bg: rgba(45, 212, 191, 0.14);
  --badge-early-line: rgba(45, 212, 191, 0.35);

  --badge-premium: #fbbf24;
  --badge-premium-bg: rgba(251, 191, 36, 0.14);
  --badge-premium-line: rgba(251, 191, 36, 0.35);

  /* Destructive actions only (delete data / delete account) — the one
     other place besides badges that intentionally steps off the violet
     ramp, so "this is irreversible" reads as a different kind of signal
     than the brand accent. */
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.1);
  --danger-line: rgba(248, 113, 113, 0.4);

  --bg: #050507;
  --bg-2: #0a0812;
  --bg-raised: #0e0b16;

  --surface-1: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-3: rgba(255, 255, 255, 0.1);
  --glass: linear-gradient(150deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022));
  --glass-violet: linear-gradient(150deg, rgba(124, 58, 237, 0.16), rgba(255, 255, 255, 0.025));

  --ink: #f5f3f9;
  --ink-2: #b8b2c7;
  /* Bumped from the old #7e7a8d so small mono labels clear 4.5:1 on --bg. */
  --ink-3: #918ba3;

  --line: rgba(255, 255, 255, 0.09);
  /* Interactive-component boundaries (inputs, ghost buttons). 0.35 is the
     measured minimum that clears WCAG 1.4.11's 3:1 against both --bg and
     --bg-raised; anything lower and the input outlines fail on near-black. */
  --line-2: rgba(255, 255, 255, 0.35);
  --line-soft: rgba(255, 255, 255, 0.055);
  --line-violet: rgba(168, 85, 247, 0.3);
  --hairline: inset 0 1px 0 rgba(255, 255, 255, 0.07);

  /* ==========================================================================
     02. Radius
     --r-2xs is the deliberate outlier: a tight, structural corner used only
     on flat/data surfaces (table cells, the blueprint wireframe, hairline
     rows) so they read as engineered against the soft, glowing glass radii
     used everywhere glow is allowed to appear.
     ========================================================================== */

  --r-2xs: 6px;
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-2xl: 44px;
  --r-full: 999px;

  /* ==========================================================================
     03. Spacing scale
     8px-rooted, --space-1 as a 4px half-step for fine adjustments. This is
     for component-internal spacing (padding, gaps) — viewport-level
     rhythm (section padding, page gutters) stays on the fluid clamp()
     tokens in §08, since that spacing genuinely needs to interpolate with
     viewport width rather than jump between fixed steps.
     ========================================================================== */

  --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;

  /* ==========================================================================
     04. Type scale
     Fixed steps for UI text that shouldn't reflow with viewport width
     (labels, body, buttons, table cells). --text-h1/h2/display are the
     exception — genuinely fluid, for headline-tier text — see §09 for the
     display stack itself. Base is 16px per WCAG readable-body guidance.
     ========================================================================== */

  --text-2xs: 0.6875rem; /* 11px — micro mono labels */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px — body */
  --text-md: 1.125rem; /* 18px — lede/intro */
  --text-lg: 1.375rem; /* 22px */
  --text-xl: 1.75rem; /* 28px */
  --text-2xl: 2.25rem; /* 36px */
  --text-3xl: 3rem; /* 48px */

  --text-h2: clamp(1.9rem, 1.1rem + 3vw, 3.25rem);
  --text-h1: clamp(2.75rem, 1.6rem + 4.8vw, 4.75rem);
  /* The one deliberately oversized step, reserved for the hero statement.
     ~6.75:1 against --text-base — comfortably past the 5:1 headline:body
     ratio a confident poster-style hero wants. */
  --text-display: clamp(3.4rem, 1.8rem + 6.8vw, 6.75rem);

  /* ==========================================================================
     05. Elevation + glow + blur
     --elevation-4 is the only tier that carries glow — everything below it
     is shadow only. --glow-signal is reserved: logo, primary CTA, one
     hero moment, nothing else. --glow-ambient is the background wash and
     ordinary hover glow, and is allowed more places.
     ========================================================================== */

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 18px 44px -18px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
  --glow: 0 20px 60px -20px var(--accent-a45);
  --glow-strong: 0 24px 70px -18px var(--accent-a60);

  --elevation-0: none;
  --elevation-1: var(--shadow-sm);
  --elevation-2: var(--shadow-md);
  --elevation-3: var(--shadow-lg);
  --elevation-4: var(--shadow-lg), var(--glow-strong);

  --glow-ambient: var(--glow);
  --glow-signal: var(--glow-strong);

  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 24px;

  /* ==========================================================================
     06. Motion — duration, easing, stagger
     Two different animation categories get two different timing families,
     on purpose: micro-interactions (buttons, hover, focus) read as
     "instant feedback" at 150–300ms, while scroll reveals are a slower,
     "content arriving" tier at 300–600ms. Using one timing scale for both
     is a common tell of generated-feeling motion — a hover state and a
     section entrance are not the same kind of event.
     ========================================================================== */

  --duration-instant: 100ms;
  --duration-fast: 160ms;
  --duration-base: 260ms;
  --duration-slow: 420ms;

  --duration-reveal-subtle: 360ms;
  --duration-reveal-standard: 520ms;
  --duration-reveal-headline: 560ms;

  /* Snappy ease-out-cubic — buttons, chips, hover, focus. */
  --ease-micro: cubic-bezier(0.33, 1, 0.68, 1);
  /* power1.out equivalent — standard scroll/section reveals. */
  --ease-reveal: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* expo.out — reserved for "assembling into place" stagger moments (the
     hero headline, the mobile menu's item stagger), never spent on plain
     hover/transition effects. Keeping it scoped to one motion category
     is what lets it register as deliberate rather than house style. */
  --ease-emphatic: cubic-bezier(0.16, 1, 0.3, 1);
  /* Exits run faster/sharper than entrances (~65% of enter duration). */
  --ease-exit: cubic-bezier(0.55, 0, 1, 0.45);

  --stagger-tight: 40ms; /* per-word, hero headline */
  --stagger-base: 70ms; /* per-item, section reveal groups */

  /* Legacy aliases — every rule written before this system existed keeps
     working unchanged; new rules should reach for the named tokens above
     directly instead of these. */
  --ease: var(--ease-micro);
  --ease-expo: var(--ease-emphatic);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1); /* continuous ambient loops (aurora) — a distinct third category from enter/exit, kept as its own value */
  --t-fast: var(--duration-fast);
  --t: var(--duration-base);
  --t-slow: var(--duration-slow);

  /* ==========================================================================
     07. Icon sizing
     Material Symbols Rounded stays the icon system — it's already SVG-
     based (not emoji) and scales cleanly. What was missing was
     consistent sizing; these steps replace the ad-hoc 1.05rem /
     1.15rem / 1.4rem values scattered per component.
     ========================================================================== */

  --icon-2xs: 12px; /* status-bar-scale glyphs (device mockup signal/battery) */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 28px;
  --icon-xl: 40px;

  /* ==========================================================================
     08. Layout — fluid viewport-level rhythm (see §03 for discrete
     component spacing).
     ========================================================================== */

  --max: 1200px;
  --gutter: clamp(20px, 4.5vw, 44px);
  --section-y: clamp(76px, 9vw, 150px);

  /* ==========================================================================
     09. Type stacks
     Outfit carries every display/headline moment as a single geometric
     family (400–900) — deliberately not Inter/Inter Tight, which is the
     one typeface Linear/Vercel/Notion/Framer all already share. Inter
     stays for body copy (still the right tool for long-form legibility);
     JetBrains Mono stays for labels/data, unchanged.
     ========================================================================== */

  --font-display: "Outfit", "Inter Tight", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ==========================================================================
     10. Runtime values — written by js/main.js
     ========================================================================== */

  --mx: 50%;
  --my: 50%;
  --scroll: 0;
}