/* ============================================================
   SAVANTIS DESIGN SYSTEM — colors_and_type.css
   Single source of truth for brand tokens.
   Mirrors the marketing site (light, violet) and the trading
   dashboard (dark, violet). Import this file and you get both.
   ============================================================ */

/* Webfonts — all three are open-source (SIL OFL 1.1) and self-hostable:
     • Sora              — SIL OFL 1.1, designed by Jonny Pinhorn at Google Fonts
     • Plus Jakarta Sans — SIL OFL 1.1, designed by Tokotype (Indonesian studio)
     • JetBrains Mono    — SIL OFL 1.1, released by JetBrains
   Served here from Google Fonts CDN for convenience; swap the @import
   for local @font-face rules + /fonts/ binaries before shipping to prod. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  /* ── Brand palette ────────────────────────────────────────── */
  --sv-violet:        #8f4eff;   /* primary accent */
  --sv-violet-strong: #6f2ee8;   /* hover / active */
  --sv-violet-deep:   #2a123d;   /* headers, dark panels */
  --sv-violet-ink:    #241231;   /* body text on light */
  --sv-violet-soft:   #eee0ff;   /* accent wash */

  /* Light surfaces (marketing site + app light mode) */
  --sv-page:          #f7f2fb;
  --sv-page-deep:     #f0e8f8;
  --sv-panel:         rgba(255, 255, 255, 0.84);
  --sv-panel-strong:  rgba(255, 255, 255, 0.94);
  --sv-line:          rgba(98, 59, 143, 0.12);
  --sv-line-strong:   rgba(98, 59, 143, 0.22);
  --sv-text:          #241231;
  --sv-text-muted:    #6e6080;

  /* Dark surfaces (trading dashboard) */
  --sv-d-page:        #090d12;
  --sv-d-panel:       #111821;
  --sv-d-text:        #edf2f7;
  --sv-d-text-muted:  #98a4b6;
  --sv-d-line:        #202c3a;
  --sv-d-violet:      #a78bfa;

  /* ── Product character colors (institutional three-tone) ──────
     Each product owns deep (ink) / core / wash. Core is the
     canonical accent; deep is for text + 2px stripes on paper;
     wash is the single tint behind data when warranted.
     No pastel fills, no oversaturated primaries. */
  --sv-keeper:            #22C08A;   /* hold · patient growth — jade emerald */
  --sv-keeper-deep:       #0F7A4E;
  --sv-keeper-wash:       #D6F5E7;
  --sv-pathfinder:        #E0A83A;   /* swing · wayfinding — compass brass */
  --sv-pathfinder-deep:   #8F6A10;
  --sv-pathfinder-wash:   #FAE8C1;
  --sv-striker:           #F97316;   /* intraday · decisive heat — amber flame */
  --sv-striker-deep:      #8F3C06;
  --sv-striker-wash:      #FEE4CD;
  --sv-maelstrom:         #2E96D4;   /* risk · protection (matches the Savantis logo cerulean) */
  --sv-maelstrom-deep:    #15557A;
  --sv-maelstrom-wash:    #D9ECF6;
  --sv-glassbox:          #7A40B5;   /* proof · review */
  --sv-glassbox-deep:     #3A1663;
  --sv-glassbox-wash:     #EAD9FA;

  /* ── Signal / outcome semantics ───────────────────────────── */
  --sv-success:       #059669;   /* wins, green PnL */
  --sv-success-dark:  #10b981;
  --sv-warn:          #d97706;   /* amber */
  --sv-warn-light:    #f59e0b;
  --sv-danger:        #dc2626;   /* crashes, losses */
  --sv-danger-light:  #ef4444;
  --sv-info:          #0ea5e9;   /* sky, neutral technical */
  --sv-technical:     #0f766e;   /* teal, secondary technical */

  /* Chart series (ordered) */
  --sv-chart-1: var(--sv-violet);
  --sv-chart-2: #0ea5e9;
  --sv-chart-3: var(--sv-success);
  --sv-chart-4: var(--sv-danger);
  --sv-chart-5: var(--sv-warn);

  /* ── Shadows & elevation ──────────────────────────────────── */
  --sv-shadow-sm:     0 1px 2px rgba(67, 21, 96, 0.06);
  --sv-shadow:        0 8px 24px rgba(67, 21, 96, 0.08);
  --sv-shadow-lg:     0 28px 70px rgba(67, 21, 96, 0.12);
  --sv-shadow-glow:   0 0 0 4px rgba(143, 78, 255, 0.16);

  /* ── Radii ────────────────────────────────────────────────── */
  --sv-r-xs:  4px;
  --sv-r-sm:  8px;
  --sv-r-md:  12px;
  --sv-r-lg:  18px;
  --sv-r-xl:  24px;
  --sv-r-pill: 999px;

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

  /* ── Type families ────────────────────────────────────────── */
  --sv-font-display: "Sora", "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --sv-font-body:    "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, sans-serif;
  --sv-font-mono:    "JetBrains Mono", "Geist Mono", ui-monospace, Menlo, monospace;

  /* ── Type scale (display & body) ──────────────────────────── */
  --sv-fs-display: clamp(42px, 6vw, 72px);
  --sv-fs-h1:      clamp(34px, 4vw, 48px);
  --sv-fs-h2:      clamp(26px, 3vw, 36px);
  --sv-fs-h3:      22px;
  --sv-fs-h4:      18px;
  --sv-fs-body:    16px;
  --sv-fs-sm:      14px;
  --sv-fs-xs:      12px;
  --sv-fs-eyebrow: 11px;

  --sv-lh-tight:   1.1;
  --sv-lh-snug:    1.25;
  --sv-lh-body:    1.55;
  --sv-lh-loose:   1.7;

  --sv-ls-eyebrow: 0.14em;
  --sv-ls-display: -0.02em;

  /* ── Motion — "alive, real, physical" ────────────────────────
     The brand feels hand-built when motion behaves like matter:
     things settle, they breathe, they drift. Never robotic easing,
     never instantaneous snaps. Durations overlap so compositions
     feel continuous instead of choreographed. */

  /* Eases — all physics-inspired, never linear */
  --sv-ease:          cubic-bezier(0.22, 0.61, 0.36, 1);     /* standard settle */
  --sv-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);         /* swift exit */
  --sv-ease-in:       cubic-bezier(0.7, 0, 0.84, 0);         /* gather-before-go */
  --sv-ease-elastic:  cubic-bezier(0.34, 1.56, 0.64, 1);     /* gentle overshoot (buttons, toasts) */
  --sv-ease-breathe:  cubic-bezier(0.45, 0, 0.55, 1);        /* sine-in-out (ambient loops) */

  /* Durations — layered, never all the same */
  --sv-dur-flash:  90ms;   /* press feedback */
  --sv-dur-fast:   180ms;  /* hover, focus */
  --sv-dur:        280ms;  /* standard state change */
  --sv-dur-slow:   520ms;  /* card reveal, tab switch */
  --sv-dur-xslow:  900ms;  /* modal, onboarding */

  /* Ambient loops — the site breathes at these tempos */
  --sv-breath:     6s;     /* character idle sway, violet glow pulse */
  --sv-drift:      14s;    /* background aurora + grid parallax */
  --sv-drift-slow: 22s;    /* slowest backdrop particles */
}

/* ── Keyframes — living motion primitives ───────────────────── */

/* Breathe: a scale + opacity pulse. Use on hero glows, badges,
   the "live" dot next to fresh data, character portraits. */
@keyframes sv-breathe {
  0%, 100% { transform: scale(1);      opacity: 0.92; }
  50%      { transform: scale(1.035);  opacity: 1;    }
}

/* Drift: slow X/Y float + faint rotation. Ambient backdrops. */
@keyframes sv-drift {
  0%   { transform: translate3d(0,0,0)       rotate(0deg); }
  33%  { transform: translate3d(1.2%, -0.8%, 0) rotate(0.4deg); }
  66%  { transform: translate3d(-0.9%, 0.6%, 0) rotate(-0.3deg); }
  100% { transform: translate3d(0,0,0)       rotate(0deg); }
}

/* Settle: entrance — rise from 12px below with slight blur clearing.
   Every marketing section and card uses this, staggered. */
@keyframes sv-settle {
  0%   { opacity: 0; transform: translate3d(0, 12px, 0); filter: blur(4px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0);     filter: blur(0); }
}

/* Tick: number-change flash — used on live PnL, fragility scores. */
@keyframes sv-tick {
  0%   { color: inherit; }
  15%  { color: var(--sv-violet); transform: translateY(-1px); }
  100% { color: inherit; transform: translateY(0); }
}

/* Pulse-ring: the "live" indicator. Used next to fresh data and on
   the GlassBox "Why?" eye when a signal just arrived. */
@keyframes sv-pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(143, 78, 255, 0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(143, 78, 255, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(143, 78, 255, 0);    }
}

/* Shimmer: subtle diagonal gloss — KPI values on hover, loaders. */
@keyframes sv-shimmer {
  0%   { background-position: -150% 0; }
  100% { background-position:  150% 0; }
}

/* Sway: character portraits idle with a tiny rotation — alive but
   not distracting. Pair with a long duration + ease-breathe. */
@keyframes sv-sway {
  0%, 100% { transform: rotate(-0.8deg) translateY(0); }
  50%      { transform: rotate(0.8deg)  translateY(-2px); }
}

/* ── Motion utility classes ─────────────────────────────────── */
.sv-anim-breathe { animation: sv-breathe var(--sv-breath) var(--sv-ease-breathe) infinite; }
.sv-anim-drift   { animation: sv-drift   var(--sv-drift)  var(--sv-ease-breathe) infinite; }
.sv-anim-settle  { animation: sv-settle  var(--sv-dur-slow) var(--sv-ease-out) both; }
.sv-anim-tick    { animation: sv-tick    var(--sv-dur-slow) var(--sv-ease) 1; }
.sv-anim-pulse   { animation: sv-pulse-ring 1.8s var(--sv-ease) infinite; }
.sv-anim-sway    { animation: sv-sway    var(--sv-breath) var(--sv-ease-breathe) infinite; transform-origin: 50% 90%; }

/* Stagger helpers: add to a parent, children reveal in sequence. */
.sv-stagger > * { animation: sv-settle var(--sv-dur-slow) var(--sv-ease-out) both; }
.sv-stagger > *:nth-child(1) { animation-delay: 0ms;   }
.sv-stagger > *:nth-child(2) { animation-delay: 80ms;  }
.sv-stagger > *:nth-child(3) { animation-delay: 160ms; }
.sv-stagger > *:nth-child(4) { animation-delay: 240ms; }
.sv-stagger > *:nth-child(5) { animation-delay: 320ms; }
.sv-stagger > *:nth-child(6) { animation-delay: 400ms; }

/* Hover lift — cards and buttons rise ~1–2px with a violet glow.
   Feels like the element reacts to a hand, not a mouse. */
.sv-hoverable {
  transition:
    transform   var(--sv-dur-fast) var(--sv-ease-out),
    box-shadow  var(--sv-dur)      var(--sv-ease-out),
    border-color var(--sv-dur-fast) var(--sv-ease-out);
  will-change: transform;
}
.sv-hoverable:hover {
  transform: translateY(-1px);
  box-shadow: var(--sv-shadow), 0 0 0 4px rgba(143, 78, 255, 0.12);
}
.sv-hoverable:active { transform: translateY(0) scale(0.985); transition-duration: var(--sv-dur-flash); }

/* Respect users who ask for less motion — kill the loops, keep
   meaningful transitions (hover, focus) but shorten them. */
@media (prefers-reduced-motion: reduce) {
  .sv-anim-breathe, .sv-anim-drift, .sv-anim-pulse, .sv-anim-sway,
  .sv-stagger > * { animation: none !important; }
  .sv-hoverable { transition-duration: 80ms; }
}

/* ── Semantic element styles ────────────────────────────────── */
.sv-display {
  font-family: var(--sv-font-display);
  font-size:   var(--sv-fs-display);
  line-height: var(--sv-lh-tight);
  letter-spacing: var(--sv-ls-display);
  font-weight: 700;
  color: var(--sv-text);
}
.sv-h1 { font-family: var(--sv-font-display); font-size: var(--sv-fs-h1); line-height: var(--sv-lh-tight); letter-spacing: var(--sv-ls-display); font-weight: 700; }
.sv-h2 { font-family: var(--sv-font-display); font-size: var(--sv-fs-h2); line-height: var(--sv-lh-snug);  font-weight: 700; }
.sv-h3 { font-family: var(--sv-font-display); font-size: var(--sv-fs-h3); line-height: var(--sv-lh-snug);  font-weight: 600; }
.sv-h4 { font-family: var(--sv-font-body);    font-size: var(--sv-fs-h4); line-height: var(--sv-lh-snug);  font-weight: 600; }

.sv-body  { font-family: var(--sv-font-body); font-size: var(--sv-fs-body); line-height: var(--sv-lh-body); }
.sv-small { font-family: var(--sv-font-body); font-size: var(--sv-fs-sm);   line-height: var(--sv-lh-body); }
.sv-micro { font-family: var(--sv-font-body); font-size: var(--sv-fs-xs);   line-height: var(--sv-lh-snug); }

.sv-eyebrow {
  font-family: var(--sv-font-body);
  font-size: var(--sv-fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--sv-ls-eyebrow);
  color: var(--sv-violet-strong);
}

.sv-mono, .sv-code {
  font-family: var(--sv-font-mono);
  font-feature-settings: "ss01", "zero";
}

/* Utility: subtle gradient brand text (used on hero and wordmark) */
.sv-text-gradient {
  background-image: linear-gradient(120deg, var(--sv-violet-deep), var(--sv-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}