/* RYN Design System v6 — drop-in CSS tokens.
   Sources:
   - RYN_DESIGN_SYSTEM.md (brand tokens v1.0)
   - RYN_DESIGN_SYSTEM_V2_CONVERSATIONAL.md (agent UI semantic tokens)
   Load early so all subsequent stylesheets and inline components inherit. */

:root {
  /* Brand — Pacific. Darkened to #007BA3 (was #0095C0) to meet WCAG 2.1 AA (UX-012): white text
     on this colour, and this colour as link text on white, now clear 4.5:1 (was 3.46:1). */
  --ryn-pacific: #007BA3;
  --ryn-pacific-medium: #5DA8CC;
  --ryn-pacific-light: #8FBEDA;

  /* Brand — Firebush */
  --ryn-firebush: #F4971E;
  --ryn-firebush-medium: #F8AD52;
  --ryn-firebush-light: #FBC380;

  /* Neutrals */
  --ryn-navy: #485263;
  /* Darkened from #AAAAAA → #6b6b6b to meet WCAG 2.1 AA 4.5:1 for muted text on white (UX-012). */
  --ryn-grey: #6b6b6b;
  --ryn-smoke: #E3E3E3;
  --ryn-smoke-medium: #F1F2F3;
  --ryn-smoke-light: #F8F8F8;

  /* Gradients */
  --ryn-pacific-gradient: linear-gradient(135deg, #69B6D2 0%, #0C89B7 100%);
  --ryn-firebush-gradient: linear-gradient(135deg, #F4971E 0%, #FBC380 100%);

  /* Data viz */
  --ryn-data-blue: #0B68BF;
  --ryn-data-cyan-light: #D0E9E8;
  --ryn-data-peach: #FFC9A5;
  --ryn-data-burgundy: #A4455C;

  /* Typography */
  --ryn-font-display: "Museo Slab", "Playfair Display", Georgia, serif;
  --ryn-font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spacing scale (4px base) */
  --ryn-space-1: 4px;
  --ryn-space-2: 8px;
  --ryn-space-3: 12px;
  --ryn-space-4: 16px;
  --ryn-space-5: 24px;
  --ryn-space-6: 32px;
  --ryn-space-7: 48px;
  --ryn-space-8: 64px;
  --ryn-space-9: 96px;
  --ryn-space-10: 128px;

  /* Radius */
  --ryn-radius-sm: 4px;
  --ryn-radius-md: 8px;
  --ryn-radius-lg: 12px;
  --ryn-radius-xl: 16px;
  --ryn-radius-full: 9999px;

  /* Shadow */
  --ryn-shadow-sm: 0 1px 2px rgba(72, 82, 99, 0.08);
  --ryn-shadow-md: 0 4px 12px rgba(72, 82, 99, 0.10);
  --ryn-shadow-lg: 0 8px 24px rgba(72, 82, 99, 0.14);
  --ryn-shadow-xl: 0 16px 48px rgba(72, 82, 99, 0.18);

  /* Motion */
  --ryn-motion-fast: 150ms;
  --ryn-motion-base: 250ms;
  --ryn-motion-slow: 400ms;
  --ryn-motion-page: 600ms;
  --ryn-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ryn-ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --ryn-ease-spring: cubic-bezier(0.5, 1.5, 0.5, 1);

  /* Agent UI — semantic tokens (Phase 2 will consume these) */
  --ryn-agent-accent: var(--ryn-pacific);
  --ryn-agent-accent-bar-width: 3px;
  --ryn-agent-warn: var(--ryn-firebush);

  --ryn-bubble-user-bg: var(--ryn-pacific-light);
  --ryn-bubble-user-text: var(--ryn-navy);
  --ryn-bubble-agent-bg: #FFFFFF;
  --ryn-bubble-agent-text: var(--ryn-navy);

  --ryn-confidence-high: var(--ryn-pacific);
  --ryn-confidence-medium: var(--ryn-firebush);
  --ryn-confidence-low: var(--ryn-grey);

  --ryn-bubble-radius: var(--ryn-radius-lg);
  --ryn-bubble-radius-tail: 4px;
  --ryn-bubble-padding-user: 12px 16px;
  --ryn-bubble-padding-agent: 14px 18px;
  --ryn-bubble-maxw-user: 75%;
  --ryn-bubble-maxw-agent: 85%;

  --ryn-chip-padding: 8px 14px;
  --ryn-chip-radius: var(--ryn-radius-full);

  --ryn-chat-maxw-content: 640px;
  --ryn-chat-gap-same-speaker: var(--ryn-space-4);
  --ryn-chat-gap-cross-speaker: var(--ryn-space-5);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}