/* Roaa.ai semantic tokens — use these variables in UI code, not raw palette values. */
:root {
  color-scheme: light dark;
  --roaa-font-ui: Inter, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --roaa-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --roaa-font-size-xs: 0.75rem;
  --roaa-font-size-sm: 0.875rem;
  --roaa-font-size-md: 1rem;
  --roaa-font-size-lg: 1.25rem;
  --roaa-font-size-xl: 1.5rem;
  --roaa-font-size-2xl: 2rem;
  --roaa-font-size-3xl: 2.5rem;
  --roaa-font-weight-regular: 400;
  --roaa-font-weight-medium: 500;
  --roaa-font-weight-semibold: 600;
  --roaa-font-weight-bold: 700;
  --roaa-line-height-tight: 1.2;
  --roaa-line-height-heading: 1.3;
  --roaa-line-height-body: 1.5;
  --roaa-line-height-relaxed: 1.65;
  --roaa-letter-spacing-tight: -0.02em;
  --roaa-letter-spacing-normal: 0;
  --roaa-letter-spacing-label: 0.06em;
  --roaa-space-0: 0;
  --roaa-space-1: 0.25rem;
  --roaa-space-2: 0.5rem;
  --roaa-space-3: 0.75rem;
  --roaa-space-4: 1rem;
  --roaa-space-5: 1.25rem;
  --roaa-space-6: 1.5rem;
  --roaa-space-8: 2rem;
  --roaa-space-10: 2.5rem;
  --roaa-space-12: 3rem;
  --roaa-space-16: 4rem;
  --roaa-radius-sm: 0.5rem;
  --roaa-radius-md: 0.75rem;
  --roaa-radius-lg: 1rem;
  --roaa-radius-xl: 1.5rem;
  --roaa-radius-pill: 999px;
  --roaa-border-width-hairline: 1px;
  --roaa-border-width-strong: 2px;
  --roaa-icon-size-sm: 1rem;
  --roaa-icon-size-md: 1.25rem;
  --roaa-icon-size-lg: 1.5rem;
  --roaa-icon-size-xl: 2rem;
  --roaa-motion-instant: 80ms;
  --roaa-motion-fast: 160ms;
  --roaa-motion-normal: 240ms;
  --roaa-motion-deliberate: 700ms;
  --roaa-motion-ambient: 8000ms;
  --roaa-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --roaa-ease-enter: cubic-bezier(0, 0, 0, 1);
  --roaa-ease-exit: cubic-bezier(0.3, 0, 1, 1);
}

:root,
[data-theme="light"] {
  --roaa-color-canvas: #F8F3EB;
  --roaa-color-surface: #FFFFFF;
  --roaa-color-surface-muted: #E3DFE8;
  --roaa-color-surface-preview: #D4CEDC;
  --roaa-color-surface-elevated: #FFFFFF;
  --roaa-color-surface-inverse: #211A27;
  --roaa-color-navigation-surface: #211A27;
  --roaa-color-navigation-text: #F8F3EB;
  --roaa-color-navigation-current-surface: #3D3046;
  --roaa-color-navigation-current-text: #F8F3EB;
  --roaa-color-border: #CBC4D4;
  --roaa-color-border-strong: #8C8198;
  --roaa-color-text-primary: #211A27;
  --roaa-color-text-secondary: #5E5368;
  --roaa-color-text-muted: #685D70;
  --roaa-color-text-inverse: #F8F3EB;
  --roaa-color-action-primary: #5B55D9;
  --roaa-color-action-primary-hover: #4C46C4;
  --roaa-color-action-primary-text: #FFFFFF;
  --roaa-color-action-secondary: #E3DFE8;
  --roaa-color-action-secondary-hover: #D4CEDC;
  --roaa-color-action-secondary-text: #211A27;
  --roaa-color-focus-ring: #4C46C4;
  --roaa-color-selection: #E2E0FF;
  --roaa-color-selection-text: #211A27;
  --roaa-color-success-surface: #D9F5EA;
  --roaa-color-success-text: #27624F;
  --roaa-color-warning-surface: #FFF0C9;
  --roaa-color-warning-text: #6B4A00;
  --roaa-color-danger-surface: #FFE2DB;
  --roaa-color-danger-text: #8B3329;
  --roaa-color-info-surface: #E2E5FF;
  --roaa-color-info-text: #3C448F;
  --roaa-color-scrim: #211A27B8;
  --roaa-gradient-brand-mark: linear-gradient(135deg, #6F6BEF 0%, #B47EDC 52%, #FF9878 100%);
  --roaa-gradient-priority-action: linear-gradient(100deg, #827CF5 0%, #B47EDC 48%, #FF9878 100%);
  --roaa-color-priority-action-text: #211A27;
  --roaa-shadow-sm: 0 1px 2px rgb(33 26 39 / 0.08);
  --roaa-shadow-md: 0 8px 24px rgb(33 26 39 / 0.10);
  --roaa-shadow-lg: 0 20px 48px rgb(33 26 39 / 0.14);
}

[data-theme="dark"] {
  --roaa-color-canvas: #211A27;
  --roaa-color-surface: #28212F;
  --roaa-color-surface-muted: #33283A;
  --roaa-color-surface-preview: #3D3046;
  --roaa-color-surface-elevated: #3D3046;
  --roaa-color-surface-inverse: #F8F3EB;
  --roaa-color-navigation-surface: #28212F;
  --roaa-color-navigation-text: #F8F3EB;
  --roaa-color-navigation-current-surface: #493D70;
  --roaa-color-navigation-current-text: #F8F3EB;
  --roaa-color-border: #6F5E79;
  --roaa-color-border-strong: #9B89A6;
  --roaa-color-text-primary: #F8F3EB;
  --roaa-color-text-secondary: #CBC4D4;
  --roaa-color-text-muted: #B9AFBF;
  --roaa-color-text-inverse: #211A27;
  --roaa-color-action-primary: #B47EDC;
  --roaa-color-action-primary-hover: #C998E8;
  --roaa-color-action-primary-text: #211A27;
  --roaa-color-action-secondary: #3D3046;
  --roaa-color-action-secondary-hover: #4A3A54;
  --roaa-color-action-secondary-text: #F8F3EB;
  --roaa-color-focus-ring: #FF9878;
  --roaa-color-selection: #493D70;
  --roaa-color-selection-text: #F8F3EB;
  --roaa-color-success-surface: #244638;
  --roaa-color-success-text: #D9F5EA;
  --roaa-color-warning-surface: #594214;
  --roaa-color-warning-text: #FFE8A3;
  --roaa-color-danger-surface: #5E2926;
  --roaa-color-danger-text: #FFE2DB;
  --roaa-color-info-surface: #30345E;
  --roaa-color-info-text: #E2E5FF;
  --roaa-color-scrim: #0E0A12CC;
  --roaa-gradient-brand-mark: linear-gradient(135deg, #6F6BEF 0%, #B47EDC 52%, #FF9878 100%);
  --roaa-gradient-priority-action: linear-gradient(100deg, #827CF5 0%, #B47EDC 48%, #FF9878 100%);
  --roaa-color-priority-action-text: #211A27;
  --roaa-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.28);
  --roaa-shadow-md: 0 8px 24px rgb(0 0 0 / 0.32);
  --roaa-shadow-lg: 0 20px 48px rgb(0 0 0 / 0.40);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --roaa-color-canvas: #211A27;
    --roaa-color-surface: #28212F;
    --roaa-color-surface-muted: #33283A;
    --roaa-color-surface-preview: #3D3046;
    --roaa-color-surface-elevated: #3D3046;
    --roaa-color-surface-inverse: #F8F3EB;
    --roaa-color-navigation-surface: #28212F;
    --roaa-color-navigation-text: #F8F3EB;
    --roaa-color-navigation-current-surface: #493D70;
    --roaa-color-navigation-current-text: #F8F3EB;
    --roaa-color-border: #6F5E79;
    --roaa-color-border-strong: #9B89A6;
    --roaa-color-text-primary: #F8F3EB;
    --roaa-color-text-secondary: #CBC4D4;
    --roaa-color-text-muted: #B9AFBF;
    --roaa-color-text-inverse: #211A27;
    --roaa-color-action-primary: #B47EDC;
    --roaa-color-action-primary-hover: #C998E8;
    --roaa-color-action-primary-text: #211A27;
    --roaa-color-action-secondary: #3D3046;
    --roaa-color-action-secondary-hover: #4A3A54;
    --roaa-color-action-secondary-text: #F8F3EB;
    --roaa-color-focus-ring: #FF9878;
    --roaa-color-selection: #493D70;
    --roaa-color-selection-text: #F8F3EB;
    --roaa-color-success-surface: #244638;
    --roaa-color-success-text: #D9F5EA;
    --roaa-color-warning-surface: #594214;
    --roaa-color-warning-text: #FFE8A3;
    --roaa-color-danger-surface: #5E2926;
    --roaa-color-danger-text: #FFE2DB;
    --roaa-color-info-surface: #30345E;
    --roaa-color-info-text: #E2E5FF;
    --roaa-color-scrim: #0E0A12CC;
    --roaa-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.28);
    --roaa-shadow-md: 0 8px 24px rgb(0 0 0 / 0.32);
    --roaa-shadow-lg: 0 20px 48px rgb(0 0 0 / 0.40);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --roaa-motion-deliberate: 160ms;
    --roaa-motion-ambient: 160ms;
  }
}