/* ==========================================================================
   FAYOS — Design Tokens
   The single source of truth for the brand system. All other CSS references
   these variables; never hard-code a brand color elsewhere.
   ========================================================================== */

:root {
  /* ---- Brand palette ---- */
  --fy-primary: #0F4C81;          /* Deep Blue */
  --fy-primary-600: #0d4373;
  --fy-primary-700: #0a3257;
  --fy-primary-050: #e7eef5;
  --fy-secondary: #FF7A00;        /* Orange */
  --fy-secondary-600: #e66e00;
  --fy-secondary-050: #fff1e3;

  /* ---- Neutrals ---- */
  --fy-white: #ffffff;
  --fy-gray-050: #f7f8fa;
  --fy-gray-100: #eef0f3;
  --fy-gray-200: #e2e6ea;
  --fy-gray-300: #cbd2da;
  --fy-gray-400: #9aa4b1;
  --fy-gray-500: #6b7685;
  --fy-gray-600: #4b5563;
  --fy-gray-700: #344050;
  --fy-gray-900: #161c24;         /* Dark Gray / near-black text */

  /* ---- Semantic ---- */
  --fy-text: var(--fy-gray-900);
  --fy-text-muted: var(--fy-gray-500);
  --fy-bg: var(--fy-white);
  --fy-bg-alt: var(--fy-gray-050);
  --fy-border: var(--fy-gray-200);
  --fy-success: #1f9d55;
  --fy-warning: #f0a500;
  --fy-danger: #d64545;
  --fy-info: var(--fy-primary);

  /* ---- Typography ---- */
  --fy-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fy-font-display: "Poppins", var(--fy-font-sans);
  --fy-fs-xs: 0.75rem;
  --fy-fs-sm: 0.875rem;
  --fy-fs-base: 1rem;
  --fy-fs-lg: 1.125rem;
  --fy-fs-xl: 1.375rem;
  --fy-fs-2xl: 1.75rem;
  --fy-fs-3xl: 2.25rem;
  --fy-fs-4xl: 3rem;
  --fy-lh-tight: 1.15;
  --fy-lh-base: 1.55;

  /* ---- Spacing scale (4px base) ---- */
  --fy-sp-1: 0.25rem;
  --fy-sp-2: 0.5rem;
  --fy-sp-3: 0.75rem;
  --fy-sp-4: 1rem;
  --fy-sp-5: 1.5rem;
  --fy-sp-6: 2rem;
  --fy-sp-8: 3rem;
  --fy-sp-10: 4rem;
  --fy-sp-12: 6rem;

  /* ---- Radius ---- */
  --fy-radius-sm: 8px;
  --fy-radius: 14px;
  --fy-radius-lg: 22px;
  --fy-radius-pill: 999px;

  /* ---- Shadows (subtle, premium) ---- */
  --fy-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --fy-shadow-sm: 0 2px 8px rgba(16, 24, 40, 0.06);
  --fy-shadow: 0 6px 20px rgba(16, 24, 40, 0.08);
  --fy-shadow-lg: 0 18px 48px rgba(15, 76, 129, 0.14);

  /* ---- Layout ---- */
  --fy-container: 1280px;
  --fy-container-wide: 1480px;
  --fy-header-h: 72px;

  /* ---- Motion ---- */
  --fy-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fy-dur: 220ms;
  --fy-z-header: 1000;
  --fy-z-drawer: 1100;
  --fy-z-modal: 1200;
}

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