/* ══════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════ */

:root {
  /* Colours */
  --osb-charcoal: #111111;
  --osb-graphite: #1E1E1E;
  --osb-graphite-mid: #252525;
  --osb-brass: #B39B6A;
  --osb-brass-hover: #C8AD78;
  --osb-brass-dark: #9A8555;
  --osb-silver: #A8A9AD;
  --osb-silver-light: #C5C6C8;
  --osb-concrete: #6B6B6B;
  --osb-concrete-light: #8A8A8A;
  --osb-off-white: #F5F4F0;
  --osb-white: #FFFFFF;

  /* Borders */
  --osb-border: rgba(179, 155, 106, 0.15);
  --osb-border-dark: rgba(17, 17, 17, 0.1);
  --osb-border-subtle: rgba(255, 255, 255, 0.06);

  /* Typography */
  --osb-font-heading: 'Space Grotesk', sans-serif;
  --osb-font-body: 'DM Sans', sans-serif;

  /* Layout */
  --osb-container-max: 1400px;
  --osb-container-wide: 1540px;
  --osb-nav-height: 90px;
}

@media (max-width: 640px) {
  :root {
    --osb-nav-height: 74px;
  }
}