/* ═══════════════════════════════════════════════════════
   AFI Design System – Design Tokens
   All CSS custom properties for the application.
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Brand / Theme ──
     Default is blue. Overridden by theme-{color}.css */
  --color-primary: #1a385d;
  --color-primary-rgb: 26, 56, 93;
  --color-on-primary: #fff;

  /* ── Neutral palette ── */
  --color-black: #121212;
  --color-gray-900: #1a1a2e;
  --color-gray-800: #343a40;
  --color-gray-700: #495057;
  --color-gray-600: #666666;
  --color-gray-500: #888888;
  --color-gray-400: #c3c3c3;
  --color-gray-300: #ced4da;
  --color-gray-200: #e9ecef;
  --color-gray-150: #dee2e6;
  --color-gray-100: #f6f6f6;
  --color-gray-50: #f8f9fa;
  --color-white: #fff;

  /* ── Semantic ── */
  --color-success: #00c273;
  --color-danger: #dc3545;
  --color-warning: #a4a400;
  --color-info: #46b1c9;
  --color-link: #437f97;

  /* ── Typography ── */
  --font-family: "Montserrat", sans-serif;
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;

  /* ── Spacing ── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1.25rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* ── Borders & Radii ── */
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-xl: 25px;
  --radius-pill: 30px;
  --radius-circle: 50%;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* ── Layout ── */
  --footer-height: 88px;
  --input-height: 48px;

  /* ── Transitions ── */
  --transition-fast: 0.15s ease-in-out;
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index scale ── */
  --z-loading: 9999;
  --z-overlay: 1001;
  --z-modal-overlay: 1051;
}