/* ============================================
   DESIGN TOKENS — Ironclad Civil
   ============================================
   Deep navy background with safety-yellow accent.
   Professional civil engineering & earthworks feel.
   ============================================ */

:root {
  /* ── Brand Colors ── */
  --color-primary: #0b1d3a;        /* Deep navy — main brand */
  --color-primary-hover: #091529;
  --color-secondary: #f5c518;      /* Safety yellow — bold accent */
  --color-accent: #f5c518;         /* Links, active states, underlines */
  --color-accent-hover: #d4a910;
  --color-highlight: #f5c518;      /* CTAs, badges, prices */
  --color-highlight-hover: #d4a910;

  /* ── Backgrounds ── */
  --bg-main: #060e1a;             /* Near-black navy page bg */
  --bg-elevated: #0d1b30;         /* Card/panel backgrounds */
  --bg-elevated-hover: #122444;

  /* ── Text ── */
  --text-primary: #ffffff;
  --text-secondary: #8a9bb5;
  --text-dark: #060e1a;

  /* ── Borders & Glass ── */
  --border-color: rgba(245, 197, 24, 0.12);
  --glass-bg: rgba(11, 29, 58, 0.88);
  --glass-border: rgba(245, 197, 24, 0.08);

  /* ── Typography ── */
  --font-heading: "Outfit", sans-serif;
  --font-body: "Inter", sans-serif;

  /* ── Layout ── */
  --max-width: 1400px;
  --header-height: 72px;
  --section-pad: 100px 5%;

  /* ── Border Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ── Transitions ── */
  --ease-fast: 0.2s ease;
  --ease-normal: 0.3s ease;
  --ease-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}