/* =============================================================================
   NEW BELMONT COATINGS — CSS DESIGN TOKENS
   All brand values live here. Reference via var(--token-name) everywhere else.
   Never hardcode a color, font, or spacing value in style.css.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     COLORS
  --------------------------------------------------------------------------- */
  --color-navy: #1b2a5e; /* Primary — headings, header bg, CTA buttons   */
  --color-navy-dark: #0f1a3d; /* Darker navy — footer bg, deep shadows        */
  --color-navy-light: #243270; /* Lighter navy — hover states on dark surfaces  */
  --color-red: #c8102e; /* Accent — badges, hover highlights             */
  --color-red-dark: #a00c24; /* Darker red — button hover                    */
  --color-white: #ffffff;
  --color-grey-light: #f4f5f7; /* Section backgrounds                          */
  --color-grey-mid: #e2e4e9; /* Borders, dividers                            */
  --color-grey-dark: #9ca3af; /* Disabled text, placeholders                  */
  --color-text: #111827; /* Body text                                    */
  --color-text-muted: #6b7280; /* Subtitles, captions, secondary text          */

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY
  --------------------------------------------------------------------------- */
  --font-heading:
    "proxima-nova", sans-serif; /* Bold/SemiBold — all headings          */
  --font-body:
    "proxima-nova", sans-serif; /* Regular/Medium — body, UI             */

  /* Type scale (fluid where needed, fixed base) */
  --text-xs: 0.75rem; /*  12px */
  --text-sm: 0.875rem; /*  14px */
  --text-base: 1rem; /*  16px */
  --text-lg: 1.125rem; /*  18px */
  --text-xl: 1.25rem; /*  20px */
  --text-2xl: 1.5rem; /*  24px */
  --text-3xl: 1.875rem; /*  30px */
  --text-4xl: 2.25rem; /*  36px */
  --text-5xl: 3rem; /*  48px */
  --text-6xl: 3.75rem; /*  60px */
  --text-7xl: 4.5rem; /*  72px */

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-loose: 1.8;

  /* Letter spacing */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.14em;

  /* ---------------------------------------------------------------------------
     SPACING (4px base grid)
  --------------------------------------------------------------------------- */
  --space-1: 0.25rem; /*  4px */
  --space-2: 0.5rem; /*  8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-14: 3.5rem; /* 56px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */
  --space-32: 8rem; /* 128px */

  /* ---------------------------------------------------------------------------
     LAYOUT
  --------------------------------------------------------------------------- */
  --container-max: 1200px;
  --container-padding: 1.25rem; /* 20px — grows to 2rem on wider screens */
  --header-height: 72px;
  --section-py: clamp(3rem, 7vw, 5rem); /* Responsive vertical rhythm */

  /* ---------------------------------------------------------------------------
     BORDERS & RADIUS
  --------------------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* ---------------------------------------------------------------------------
     SHADOWS
  --------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-card:
    0 2px 8px rgba(27, 42, 94, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-card-hover:
    0 8px 32px rgba(27, 42, 94, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);

  /* ---------------------------------------------------------------------------
     TRANSITIONS
  --------------------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------------------------------------------------------------------------
     Z-INDEX SCALE
  --------------------------------------------------------------------------- */
  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
}