/* ============================================
   DESIGN TOKENS — Apex Equipment
   Mining Equipment Hire
   Black background + Electric Blue accents
   ============================================ */

:root {
  /* ── Brand Colors ── */
  --color-primary: #0a3d5c;           /* Deep industrial blue */
  --color-primary-hover: #072d44;
  --color-secondary: #00b4d8;         /* Electric blue accent */
  --color-accent: #00b4d8;            /* Links, active states, hover glow */
  --color-accent-hover: #0096b7;
  --color-highlight: #00b4d8;         /* CTAs, badges — electric blue */
  --color-highlight-hover: #0096b7;

  /* ── Backgrounds ── */
  --bg-main: #0a0a0a;
  --bg-elevated: #111111;
  --bg-elevated-hover: #1a1a1a;

  /* ── Text ── */
  --text-primary: #ffffff;
  --text-secondary: #8a9bae;
  --text-dark: #0a0a0a;

  /* ── Borders & Glass ── */
  --border-color: rgba(0, 180, 216, 0.15);
  --glass-bg: rgba(10, 10, 10, 0.88);
  --glass-border: rgba(0, 180, 216, 0.10);

  /* ── 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);
}