/* ============================================================================
   xTriel — Design System Tokens (single source of truth)
   Derived pixel-for-pixel from the production dashboard, extended into a full
   premium marketing design system. DO NOT redefine these values elsewhere —
   every stylesheet and component consumes these custom properties.
   ========================================================================== */

:root {
  /* ── Core brand palette ── */
  --bg: #050505;
  --bg-elev: #0A0A0A;          /* elevated surfaces / nav */
  --card: #111111;
  --card-hover: #161616;
  --card-2: #0d0d0f;           /* nested surfaces */

  --primary: #2F6BFF;          /* xTriel blue */
  --primary-2: #00C6FF;        /* cyan terminus of the brand gradient */
  --primary-ink: #7BA8FF;      /* readable blue on dark (labels/links) */
  --primary-glow: rgba(47, 107, 255, 0.35);

  --green: #00E096;            /* profit / positive / live */
  --red: #FF3B30;             /* loss / risk / alert */
  --amber: #FFB800;            /* warning / stale / free-tier */
  --violet: #8B5CF6;           /* accent for "Max" tier + AI flourishes */

  --text: #FFFFFF;
  --text-soft: #C7C9D1;
  --text-muted: #888888;
  --text-faint: #5a5d66;

  --border: #222222;
  --border-soft: rgba(255, 255, 255, 0.06);
  --glass: rgba(255, 255, 255, 0.03);
  --glass-2: rgba(255, 255, 255, 0.05);

  /* ── Brand gradients ── */
  --grad-brand: linear-gradient(135deg, #2F6BFF 0%, #00C6FF 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(47,107,255,0.18) 0%, rgba(0,198,255,0.10) 100%);
  --grad-violet: linear-gradient(135deg, #2F6BFF 0%, #8B5CF6 100%);
  --grad-profit: linear-gradient(135deg, #00E096 0%, #00C6FF 100%);
  --grad-text: linear-gradient(135deg, #FFFFFF 0%, #9db4ff 60%, #00C6FF 100%);
  --grad-sheen: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.25) 50%, transparent 80%);

  /* radial aura used behind hero + section anchors */
  --aura: radial-gradient(ellipse at 30% 20%, rgba(47,107,255,0.10) 0%, transparent 55%),
          radial-gradient(ellipse at 75% 80%, rgba(0,198,255,0.07) 0%, transparent 55%);

  /* ── Typography ── */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-display: clamp(44px, 7vw, 84px);
  --fs-h1: clamp(36px, 5.2vw, 64px);
  --fs-h2: clamp(28px, 3.6vw, 44px);
  --fs-h3: clamp(20px, 2vw, 26px);
  --fs-lead: clamp(17px, 1.6vw, 21px);
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.65;
  --tracking-tight: -0.03em;
  --tracking-wide: 0.08em;

  /* ── Spacing scale (8pt) ── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* ── Radii ── */
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 100px;

  /* ── Shadows / elevation ── */
  --sh-sm: 0 2px 8px rgba(0,0,0,0.4);
  --sh-md: 0 12px 40px -10px rgba(0,0,0,0.55);
  --sh-lg: 0 30px 80px -20px rgba(0,0,0,0.7);
  --sh-glow: 0 8px 40px var(--primary-glow);
  --sh-glow-lg: 0 20px 80px -10px var(--primary-glow);

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-slow: 0.6s;

  /* ── Layout ── */
  --maxw: 1200px;
  --maxw-wide: 1340px;
  --nav-h: 68px;
}

/* Light theme override (the marketing site ships dark by default; this exists
   for parity with the app and an optional toggle). */
[data-theme="light"] {
  --bg: #F5F5F7;
  --bg-elev: #FFFFFF;
  --card: #FFFFFF;
  --card-hover: #F0F0F2;
  --card-2: #FAFAFC;
  --text: #0c0d10;
  --text-soft: #2b2d33;
  --text-muted: #5f626b;
  --text-faint: #9aa0ad;
  --border: #E2E3E8;
  --border-soft: rgba(0,0,0,0.06);
  --glass: rgba(0,0,0,0.03);
  --glass-2: rgba(0,0,0,0.05);
  --green: #00B871;
  --red: #E53935;
  --amber: #F59E0B;
  --grad-text: linear-gradient(135deg, #0c0d10 0%, #2F6BFF 70%);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}