/* ============================================================ */
/* DESIGN TOKENS — Risk Alert Module                             */
/* ============================================================ */

:root {
  /* --- Spacing --- */
  --ra-space-xs: 0.25rem;
  --ra-space-sm: 0.5rem;
  --ra-space-md: 1rem;
  --ra-space-lg: 1.5rem;
  --ra-space-xl: 2.5rem;

  /* --- Typography --- */
  --ra-font-xs: 0.7rem;
  --ra-font-sm: 0.8rem;
  --ra-font-md: 0.9rem;
  --ra-font-lg: 1.05rem;
  --ra-font-xl: 1.35rem;
  --ra-font-xxl: 1.85rem;

  /* --- Typography scale (modular) --- */
  --ra-text-100: 0.65rem;
  --ra-text-200: 0.75rem;
  --ra-text-300: 0.875rem;
  --ra-text-400: 1rem;
  --ra-text-500: 1.125rem;
  --ra-text-600: 1.35rem;
  --ra-text-700: 1.6rem;
  --ra-text-800: 1.85rem;
  --ra-text-900: 2.25rem;

  /* --- Semantic colors --- */
  --ra-color-danger:        #dc2626;
  --ra-color-danger-bg:     #fef2f2;
  --ra-color-success:       #16a34a;
  --ra-color-success-bg:    #f0fdf4;
  --ra-color-warning:       #d97706;
  --ra-color-warning-bg:    #fffbeb;
  --ra-color-info:          #2563eb;
  --ra-color-info-bg:       #eff6ff;

  /* --- Elevation --- */
  --ra-elevation-sm: 0 1px 3px rgba(0,0,0,0.08);
  --ra-elevation-md: 0 4px 12px rgba(0,0,0,0.1);
  --ra-elevation-lg: 0 8px 24px rgba(0,0,0,0.12);

  /* --- Motion --- */
  --ra-motion-fast:   0.15s;
  --ra-motion-normal: 0.25s;
  --ra-motion-slow:   0.4s;
  --ra-motion-enter:  0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  --ra-motion-exit:   0.2s ease-in;
  --ra-motion-premium: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}