/* ForecastPro 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 */
  --success:       #23a559;
  --success-soft:  rgba(35, 165, 89, 0.16);
  --success-text:  #45c474;
  --danger:        #f23f43;
  --danger-hover:  #c63133;
  --danger-soft:   rgba(242, 63, 67, 0.16);
  --danger-text:   #ff7479;
  --warning:       #f0b132;
  --warning-soft:  rgba(240, 177, 50, 0.16);
  --info:          #00a8fc;
  --info-soft:     rgba(0, 168, 252, 0.14);
  --info-text:     #5ec1ff;

  /* Text */
  --text-primary: #f2f3f5;
  --text-default: #dbdee1;
  --text-muted:   #b5bac1;
  --text-dim:     #80848e;
  --text-link:    #00a8fc;

  /* 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;
  }
}