/* ==========================================================================
   JFC CONTRACTOR — DESIGN TOKENS
   A blueprint-tech system: deep navy + precision blue + amber, built on a
   faint architectural grid. Rooted in the contractor's own craft: technical
   drawings, precision, and the same circular trade-icon language used in
   the brand's print collateral.
   ========================================================================== */

:root {
  /* ---- Color: Navy scale (primary brand) ---- */
  --navy-950: #060e24;
  --navy-900: #0b1a3f;
  --navy-800: #0f2557;
  --navy-700: #16336f;
  --navy-600: #1e3f8a;

  /* ---- Color: Precision blue (glow / interactive accent) ---- */
  --blue-500: #2f6fed;
  --blue-400: #4c8bff;
  --blue-300: #7fb0ff;
  --blue-glow: rgba(47, 111, 237, 0.5);
  --blue-glow-soft: rgba(47, 111, 237, 0.18);

  /* ---- Color: Amber (trust / craftsmanship accent, used sparingly) ---- */
  --amber-500: #f2a824;
  --amber-400: #ffc35c;
  --amber-glow: rgba(242, 168, 36, 0.45);

  /* ---- Color: Neutrals ---- */
  --white: #ffffff;
  --gray-50: #f5f7fb;
  --gray-100: #eaeef6;
  --gray-200: #d9dfec;
  --gray-400: #9aa4bc;
  --gray-500: #64708a;
  --gray-700: #37415c;
  --gray-900: #10152a;

  /* ---- Semantic ---- */
  --bg-body: var(--gray-50);
  --bg-surface: var(--white);
  --bg-dark: var(--navy-900);
  --bg-darker: var(--navy-950);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-500);
  --text-on-dark: #eef2fb;
  --text-on-dark-muted: #a9b4d0;
  --border-light: var(--gray-200);
  --border-dark: rgba(255, 255, 255, 0.1);

  /* ---- Typography ---- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;
  --fs-5xl: 4.5rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;
  --space-20: 9rem;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 2px 8px rgba(10, 20, 50, 0.06);
  --shadow-md: 0 8px 30px rgba(10, 20, 50, 0.1);
  --shadow-lg: 0 20px 60px rgba(6, 14, 36, 0.18);
  --shadow-glow-blue: 0 0 0 1px rgba(47, 111, 237, 0.25), 0 12px 40px rgba(47, 111, 237, 0.28);
  --shadow-glow-amber: 0 0 0 1px rgba(242, 168, 36, 0.3), 0 12px 34px rgba(242, 168, 36, 0.25);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 340ms;
  --dur-slow: 620ms;

  /* ---- Z-index ---- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-toast: 300;
}