/*
 * VibeScan Design Tokens
 * ========================
 * Pixar hyper-color design system (vibescan-design.skill.md)
 *
 * RULES:
 * - No metallic/chrome gradients anywhere.
 * - Hyper-color NEVER fills a large surface — it is a pointer, not a fill.
 * - The ONE documented exception: a single selected billing card header may carry
 *   a saturated fill inside the billing dialog (billing-conversion-design.skill.md §5).
 */

:root {
  /* ===========================
     Neutral Field (90% of UI)
     =========================== */
  --color-page: #FAFAF7;
  --color-card: #FFFFFF;
  --color-text: #1F2430;
  --color-secondary: #6B7280;
  --color-border: #ECEBE6;
  --color-dark-band: #171423;

  /* ===========================
     Hyper-Color Conversion Palette
     =========================== */
  --gradient-coral-flame: linear-gradient(135deg, #FF6B4A 0%, #FF3D6E 100%);
  --color-coral-start: #FF6B4A;
  --color-coral-end: #FF3D6E;
  --color-sunshine-gold: #FFB627;
  --color-leaf-green: #3DDC84;
  --gradient-electric-violet: linear-gradient(135deg, #8B5CF6 0%, #C026D3 100%);
  --color-violet-start: #8B5CF6;
  --color-violet-end: #C026D3;

  /* ===========================
     Severity Scale
     =========================== */
  --severity-low: #FFD166;
  --severity-medium: #FF9F45;
  --severity-high: #FF6B4A;
  --severity-critical: #E63950;

  /* ===========================
     Billing Aliases (billing-conversion-design.skill.md §3)
     =========================== */
  --billing-backdrop: rgba(23, 20, 35, .72);
  --billing-surface: #171423;
  --billing-card: #211D2B;
  --billing-card-hover: #282334;
  --billing-border: rgba(255,255,255,.11);
  --billing-border-strong: rgba(255,255,255,.22);
  --billing-text: #FFFDF8;
  --billing-muted: #B8B3C3;
  --billing-coral: linear-gradient(135deg, #FF6B4A 0%, #FF3D6E 100%);
  --billing-gold: linear-gradient(135deg, #FFD166 0%, #FFB627 55%, #FF9F45 100%);
  --billing-violet: linear-gradient(135deg, #8B5CF6 0%, #C026D3 100%);
  --billing-premium-aurora: linear-gradient(135deg, #8B5CF6 0%, #C026D3 50%, #FF3D6E 78%, #FFB627 100%);
  --billing-success: #3DDC84;

  /* ===========================
     Fluid Type Scale (clamp)
     =========================== */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.775rem + 0.25vw, 0.875rem);
  --text-base: clamp(0.875rem, 0.825rem + 0.3vw, 1rem);
  --text-lg: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-xl: clamp(1.125rem, 1rem + 0.65vw, 1.375rem);
  --text-2xl: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  --text-3xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  --text-4xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --text-5xl: clamp(2.5rem, 1.75rem + 3.5vw, 3.75rem);

  /* ===========================
     Fluid Space Scale
     =========================== */
  --space-2xs: clamp(0.25rem, 0.2rem + 0.15vw, 0.375rem);
  --space-xs: clamp(0.5rem, 0.4rem + 0.25vw, 0.625rem);
  --space-sm: clamp(0.75rem, 0.6rem + 0.4vw, 1rem);
  --space-md: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
  --space-lg: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --space-xl: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  --space-2xl: clamp(3rem, 2rem + 2.5vw, 4.5rem);
  --space-3xl: clamp(4rem, 3rem + 3vw, 6rem);

  /* ===========================
     Radii
     =========================== */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ===========================
     Shadows (warm, no chrome)
     =========================== */
  --shadow-sm: 0 1px 3px rgba(31, 36, 48, 0.06);
  --shadow-md: 0 4px 12px -2px rgba(31, 36, 48, 0.08);
  --shadow-lg: 0 8px 24px -4px rgba(31, 36, 48, 0.1);
  --shadow-coral-glow: 0 8px 24px -8px rgba(255, 61, 110, 0.35);
  --shadow-violet-glow: 0 8px 24px -8px rgba(139, 92, 246, 0.35);

  /* ===========================
     Transitions
     =========================== */
  --ease-out-expo: cubic-bezier(.22, 1, .36, 1);
  --duration-fast: 180ms;
  --duration-normal: 240ms;

  /* ===========================
     Typography Families
     =========================== */
  /* TX-02 (self-hosted, registered in wwwroot/css/vibescan-tokens.css) is deliberately scoped to
     just the main page and /pricing — never here, since --font-heading is the sitewide default
     used by every h1-h6 across the members/account surface. Pricing.razor.css applies TX-02
     directly to its own large/small text instead of switching this shared token. BillingDialog
     stays on --font-heading-regular (an explicit non-TX-02 escape hatch, kept even though it's
     now identical to --font-heading below — it exists so a future scope change to --font-heading
     can't silently pull the billing dialog along with it). */
  --font-heading: 'Outfit', 'Sora', system-ui, -apple-system, sans-serif;
  --font-heading-regular: 'Outfit', 'Sora', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* ===========================
     Layout
     =========================== */
  --sidebar-width: 256px;
  --sidebar-rail-width: 72px;
  --content-max-width: 1280px;
  --touch-target-min: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
  }
}