/* ForecastsPro design tokens — the canonical source of the brand's look.
 *
 * The web app (app/static/css/tokens.css) and the landing page
 * (landing/assets/css/tokens.css) copy this file VERBATIM so both surfaces share one
 * visual language. Change it here, then re-copy. Extend with new tokens rather than
 * repurposing existing ones.
 */
:root {
  color-scheme: dark;

  /* Surfaces, darkest → most raised */
  --bg-deepest: #1a1b1e;
  --bg-base:    #232428;
  --bg-card:    #2b2d31;
  --bg-input:   #1e1f22;
  --bg-hover:   #35363c;
  --bg-active:  #404249;
  --border:     #1f2024;
  --border-soft:#3a3c43;

  /* Brand */
  --accent:        #5865f2;
  --accent-hover:  #4752c4;
  --accent-soft:   rgba(88, 101, 242, 0.18);
  --accent-text:   #aeb7ff;
  --accent-glow:   rgba(88, 101, 242, 0.35);

  /* Semantic: ONE shade per meaning, used everywhere (text, icons, dots, bars, lines,
     charts, fills). -text is the same colour as the base token (kept as an alias); tints are
     the same colour at low alpha, never a second shade. On a solid fill of one of these
     colours, text and glyphs use --on-semantic (dark), not white. Each colour is at least
     4.9:1 as text on --bg-card. */
  --success:       #45c474;
  --success-soft:  rgba(69, 196, 116, 0.16);
  --success-text:  var(--success);
  --danger:        #ff6b6f;
  --danger-hover:  rgba(255, 107, 111, 0.24);
  --danger-soft:   rgba(255, 107, 111, 0.16);
  --danger-text:   var(--danger);
  --warning:       #f0b132;
  --warning-soft:  rgba(240, 177, 50, 0.16);
  --warning-text:  var(--warning);
  --info:          #38b6ff;
  --info-soft:     rgba(56, 182, 255, 0.14);
  --info-text:     var(--info);
  --on-semantic:   #1a1b1e;

  /* Text */
  --text-primary: #f2f3f5;
  --text-default: #dbdee1;
  --text-muted:   #b5bac1;
  --text-dim:     #80848e;
  --text-link:    var(--info);

  /* Typography — system stack only (no external font requests; keeps CSP strict) */
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
               system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  40px;
  --text-4xl:  56px;
  --leading:   1.45;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;

  /* Shape */
  --radius-sm:    4px;
  --radius-input: 6px;
  --radius-card:  10px;
  --radius-lg:    14px;
  --radius-pill:  999px;

  /* Elevation */
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.18);
  --shadow-pop:  0 6px 24px rgba(0, 0, 0, 0.3);
  --focus-ring:  0 0 0 2px var(--bg-deepest), 0 0 0 4px var(--accent);

  /* Motion */
  --ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 100ms;
  --dur:      180ms;
  --dur-slow: 320ms;
}

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