/* Algoagent design tokens — ported 1:1 from algoagent-swift-app/Sources/AlgoagentApp/Theme/Tokens.swift.
   This is the contract shared by the marketing site and the in-browser app demo, so the
   demo is not a mockup of the product: it is the product's own token set rendered in HTML.
   Change a value here only when Tokens.swift changes. */

:root {
  color-scheme: light dark;

  /* Accent — steel blue ~219deg. Selection and primary actions only, never decoration. */
  --accent:        #3A5FBC;
  --accent-press:  #2E4F9E;
  --accent-fill:   #3A5FBC;   /* fills that carry white text */
  --on-accent:     #FFFFFF;
  --accent-soft:   rgb(58 95 188 / .10);
  --focus-ring:    rgb(58 95 188 / .55);

  /* Trade semantics — always paired with a +/- glyph or label, never color alone. */
  --long:    #0E7A52;
  --short:   #C43D33;
  --staged:  #8A6414;
  --neutral: #515A6E;
  --danger:  var(--short);
  --status-ok:   var(--long);
  --status-warn: var(--staged);
  --status-bad:  var(--short);

  /* Surfaces — cool, faint blue tint. Never warm. */
  --bg:             #F4F6FA;
  --surface:        #FFFFFF;
  --surface-2:      #ECEFF6;
  --surface-raised: #ECEFF6;
  --chrome:         #FFFFFF;  /* the sidebar replaces the titlebar */

  /* Ink — every step verified >=4.5:1 on --bg and --surface. */
  --ink:        #10131F;
  --ink-muted:  #515A6E;
  --ink-faint:  #636C80;
  --hairline:        rgb(0 0 0 / .10);
  --hairline-strong: rgb(0 0 0 / .18);

  /* Type */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-title:     700 20px/1.2  var(--font-display);
  --t-section:   600 15px/1.3  var(--font-display);
  --t-card:      500 13px/1.35 var(--font-display);
  --t-body:      400 13px/1.55 var(--font-display);
  --t-caption:   500 11px/1.4  var(--font-display);
  --t-eyebrow:   600 10px/1    var(--font-display);
  --t-mono:      500 13px/1.5  var(--font-mono);

  /* Space — Theme.S */
  --s2: 2px;  --s4: 4px;  --s8: 8px;  --s12: 12px;
  --s16: 16px; --s20: 20px; --s24: 24px; --s32: 32px;

  /* Radius — Theme.R */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-full: 999px;

  /* Motion — Theme.Motion */
  --m-snappy:     .18s cubic-bezier(.22,.61,.36,1);
  --m-standard:   .22s cubic-bezier(.4,0,.2,1);
  --m-emphasized: .28s cubic-bezier(.22,.61,.36,1);

  /* Layout caps — Theme.Layout */
  --w-prose: 900px; --w-settings: 880px; --w-content: 1440px; --w-wide: 1840px; --w-form: 560px;
}

/* The desk. Dark is the appearance this app was designed in; light is the ported
   mobile palette at the same hue positions. Both ship. */
:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --accent: #5E8CE6; --accent-press: #4873CC;
    --accent-soft: rgb(94 140 230 / .10);
    --focus-ring:  rgb(94 140 230 / .55);
    --long: #2FBF86; --short: #FF5A4D; --staged: #F5B53D; --neutral: #8C919E;
    --bg: #0E0F17; --surface: #171A25; --surface-2: #12141D;
    --surface-raised: #1D212E; --chrome: #000000;
    --ink: #F0F2FA; --ink-muted: #949EB8; --ink-faint: #78829C;
    --hairline: rgb(255 255 255 / .08);
    --hairline-strong: rgb(255 255 255 / .16);
  }
}
:root[data-theme="dark"] {
  --accent: #5E8CE6; --accent-press: #4873CC;
  --accent-soft: rgb(94 140 230 / .10);
  --focus-ring:  rgb(94 140 230 / .55);
  --long: #2FBF86; --short: #FF5A4D; --staged: #F5B53D; --neutral: #8C919E;
  --bg: #0E0F17; --surface: #171A25; --surface-2: #12141D;
  --surface-raised: #1D212E; --chrome: #000000;
  --ink: #F0F2FA; --ink-muted: #949EB8; --ink-faint: #78829C;
  --hairline: rgb(255 255 255 / .08);
  --hairline-strong: rgb(255 255 255 / .16);
}

/* Self-hosted, already in public/fonts. No CDN: the CSP forbids one. */
@font-face { font-family:'Bricolage Grotesque'; src:url('/fonts/bricolage-grotesque-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('/fonts/bricolage-grotesque-600.woff2') format('woff2'); font-weight:500 600; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('/fonts/bricolage-grotesque-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('/fonts/bricolage-grotesque-800.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/fonts/jetbrains-mono-600.woff2') format('woff2'); font-weight:500 600; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/fonts/jetbrains-mono-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

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