/* =============================================================================
   Navarro Express — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow, motion.
   Brand palette per PRD. Components must reference these vars, never raw hex.
   ============================================================================= */

:root {
  /* --- Brand palette (PRD) --- */
  --navy:          #0A2540;   /* primary */
  --ocean:         #0057B8;   /* secondary / links */
  --teal:          #00A8A8;   /* accent / supporting */
  --orange:        #FF7A00;   /* CTA / highlight */
  --bg-light:      #F7F9FC;   /* page background */
  --text-dark:     #1B1B1B;   /* body text */

  /* --- Derived tints / shades --- */
  --navy-900:      #061a2e;
  --navy-700:      #0A2540;
  --navy-600:      #14385c;
  --ocean-700:     #00449a;
  --ocean-600:     #0057B8;
  --ocean-100:     #e6effb;
  --teal-600:      #00A8A8;
  --teal-100:      #e0f5f5;
  --orange-600:    #FF7A00;
  --orange-700:    #e66e00;
  --orange-100:    #fff0e0;

  /* --- Neutrals --- */
  --white:         #ffffff;
  --gray-50:       #f7f9fc;
  --gray-100:      #eef2f7;
  --gray-200:      #e2e8f0;
  --gray-300:      #cbd5e1;
  --gray-400:      #94a3b8;
  --gray-500:      #64748b;
  --gray-600:      #475569;
  --gray-700:      #334155;
  --gray-800:      #1e293b;

  /* --- Semantic tokens --- */
  --color-bg:            var(--bg-light);
  --color-surface:       var(--white);
  --color-surface-alt:   var(--gray-50);
  --color-text:          var(--text-dark);
  --color-text-muted:    var(--gray-600);
  --color-text-invert:   var(--white);
  --color-primary:       var(--ocean-600);
  --color-primary-hover: var(--ocean-700);
  --color-cta:           var(--orange-600);
  --color-cta-hover:     var(--orange-700);
  --color-border:        var(--gray-200);
  --color-ring:          var(--ocean-600);
  --color-success:       #15803d;
  --color-success-bg:    #dcfce7;
  --color-error:         #b91c1c;
  --color-error-bg:      #fee2e2;

  /* --- Typography --- */
  --font-heading: 'Poppins', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale (fluid where useful). Base 16px, 1.5 line-height. */
  --fs-xs:    0.75rem;   /* 12 */
  --fs-sm:    0.875rem;  /* 14 */
  --fs-base:  1rem;      /* 16 */
  --fs-md:    1.125rem;  /* 18 */
  --fs-lg:    1.375rem;  /* 22 */
  --fs-xl:    1.75rem;   /* 28 */
  --fs-2xl:   clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --fs-3xl:   clamp(2.25rem, 1.6rem + 3vw, 3.75rem);

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-base:   1.6;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* --- Spacing (8pt grid) --- */
  --sp-1:  0.25rem;  /* 4  */
  --sp-2:  0.5rem;   /* 8  */
  --sp-3:  0.75rem;  /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.5rem;   /* 24 */
  --sp-6:  2rem;     /* 32 */
  --sp-7:  3rem;     /* 48 */
  --sp-8:  4rem;     /* 64 */
  --sp-9:  6rem;     /* 96 */

  /* --- Layout --- */
  --container:      1200px;
  --container-wide: 1320px;
  --gutter:         1.25rem;

  /* --- Radius --- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 999px;

  /* --- Shadows (consistent elevation scale) --- */
  --sh-sm: 0 1px 2px rgba(10, 37, 64, 0.06), 0 1px 3px rgba(10, 37, 64, 0.08);
  --sh-md: 0 4px 12px rgba(10, 37, 64, 0.08), 0 2px 4px rgba(10, 37, 64, 0.06);
  --sh-lg: 0 12px 28px rgba(10, 37, 64, 0.12), 0 4px 10px rgba(10, 37, 64, 0.08);
  --sh-xl: 0 24px 48px rgba(10, 37, 64, 0.16);

  /* --- Motion --- */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  150ms;
  --dur-base:  240ms;
  --dur-slow:  400ms;

  /* --- Z-index scale --- */
  --z-base:    1;
  --z-sticky:  40;
  --z-header:  100;
  --z-overlay: 900;
  --z-modal:   1000;
}

/* --- Gradients (used for hero / accents) --- */
:root {
  --grad-navy:  linear-gradient(135deg, var(--navy-900) 0%, var(--navy-600) 55%, var(--ocean-700) 100%);
  --grad-cta:   linear-gradient(135deg, var(--orange-600) 0%, #ff9533 100%);
  --grad-teal:  linear-gradient(135deg, var(--ocean-600) 0%, var(--teal-600) 100%);
}