/* Rakentaja-avustaja — design tokens (Fable 5 draft v1).
 *
 * Lähde: WIDGET_DESIGN_BRIEF (Fable 5) 2026-07-01. Perustuu style.css:n
 * bränditokeneihin (`--primary`, `--accent` jne.) ja täydentää neljä puutosta:
 *   1. käyttäjä- vs. assistant-viestikupla-erottelu
 *   2. amber disclaimer-sävy (ei punainen — ei virhe vaan täydennys)
 *   3. focus-rengas joka näkyy sekä valkoisella että tummalla taustalla
 *   4. z-index-skaala widgetin kerroksille (yli cookie-bannerin, alle modaalin)
 *
 * Ei dark-modea MVP:ssä (rakentajaoutlet.fi:llä ei ole dark-teemaa; widget seuraa
 * sivua, ei käyttöjärjestelmää).
 */

:root {
  /* Brändistä periytetyt perusvärit (style.css) */
  --ra-color-brand-900: #1a2744;
  --ra-color-brand-700: #2c3e6b;
  --ra-color-accent-500: #e8735a;
  --ra-color-accent-600: #d4604a;

  /* Pinnat */
  --ra-color-surface-0: #ffffff;
  --ra-color-surface-1: #f5f6fa;
  --ra-color-surface-sunken: #eef1f6;
  --ra-color-border: #dcdde1;

  /* Teksti */
  --ra-color-text-primary: #2c3e50;
  --ra-color-text-secondary: #7f8c8d;
  --ra-color-text-on-brand: #ffffff;

  /* Semantiikka */
  --ra-color-success: #27ae60;
  --ra-color-warning: #f39c12;
  --ra-color-danger: #e74c3c;

  /* Disclaimer — lämmin amber, ei red. Correction- ja footer-lohkolle. */
  --ra-color-disclaimer-bg: #fff8e9;
  --ra-color-disclaimer-border: #f0c987;
  --ra-color-disclaimer-text: #7a5a00;
  --ra-color-disclaimer-icon: #b8860b;

  /* Focus */
  --ra-color-focus-ring: #2c8fe0;

  /* Typografia (ei erillistä fonttilatausta — käytetään sivun stackia) */
  --ra-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ra-font-family-mono: 'SF Mono', 'Cascadia Code', Consolas, monospace;
  --ra-font-size-xs: 0.75rem;
  --ra-font-size-sm: 0.8125rem;
  --ra-font-size-base: 0.9375rem;
  --ra-font-size-lg: 1rem;
  --ra-line-height-base: 1.5;

  /* Spacing (4px-perusta) */
  --ra-space-1: 4px;
  --ra-space-2: 8px;
  --ra-space-3: 12px;
  --ra-space-4: 16px;
  --ra-space-5: 24px;
  --ra-space-6: 32px;

  /* Muoto */
  --ra-radius-sm: 6px;
  --ra-radius-md: 10px;
  --ra-radius-lg: 16px;
  --ra-radius-full: 999px;

  /* Varjot */
  --ra-shadow-fab: 0 4px 16px rgba(26, 39, 68, 0.28), 0 2px 4px rgba(26, 39, 68, 0.15);
  --ra-shadow-panel: 0 20px 60px rgba(26, 39, 68, 0.22), 0 4px 16px rgba(0, 0, 0, 0.1);
  --ra-shadow-bubble: 0 2px 8px rgba(0, 0, 0, 0.06);

  /* Transitiot */
  --ra-transition-fast: 120ms ease;
  --ra-transition-base: 220ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index (widget elää body-lopussa; cookie-banner yleensä 1000-luvulla) */
  --ra-z-fab: 1200;
  --ra-z-panel: 1201;
  --ra-z-escalation-overlay: 1210;

  /* Mitat */
  --ra-fab-size: 56px;
  --ra-panel-width: 400px;
  --ra-panel-height: 600px;
}