:root {
  /* ---- Brand core ---- */
  --brand-primary: #d9a62e; /* metallic gold — buttons, links, accents */
  --brand-primary-dark: #b8861f; /* dark gold — hover / active states */
  --brand-primary-light: #f1d77a; /* light gold — highlights */
  --brand-primary-tint: #fff7dd; /* soft gold — backgrounds, chips */

  /* ---- Brand navy ---- */
  --brand-navy: #07122f; /* main logo navy */
  --brand-navy-light: #121f4a; /* lighter navy */
  --brand-navy-dark: #030817; /* deepest navy */

  /* ---- Neutrals / dark sections ---- */
  --ink-950: #030817; /* deepest navy — header/footer base */
  --ink-900: #07122f; /* primary dark section */
  --ink-800: #0d1a3a; /* card-on-dark background */
  --ink-700: #1b2a50; /* borders on dark sections */

  /* ---- Neutrals / light sections ---- */
  --paper-50: #f7f7f5; /* off-white section background */
  --paper-100: #ffffff; /* pure white cards */
  --paper-200: #e9e9e5; /* light dividers */

  /* ---- Text ---- */
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #b9c1d0;

  --text-on-light: #101522;
  --text-on-light-muted: #5f6572;

  /* ---- Status / utility ---- */
  --color-success: #4caf50;
  --color-warning: #d9a62e;
  --color-danger: #e5484d;

  /* ---- Elevation ---- */
  --shadow-sm: 0 2px 8px rgba(3, 8, 23, 0.08);
  --shadow-md: 0 8px 24px rgba(3, 8, 23, 0.12);
  --shadow-lg: 0 20px 48px rgba(3, 8, 23, 0.18);

  /* ---- Radius scale ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Type ---- */
  --font-display: "Sora", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
}

/* =========================================================================
   BRAND USAGE GUIDE
   -------------------------------------------------------------------------
   Gold  → CTA buttons, icons, highlights, active states, lines
   Navy  → Header, footer, dark sections, headings on dark backgrounds
   White → Cards and clean content areas
   Off-white → Main page backgrounds
   ========================================================================= */

/* ---- Example: Primary Button ---- */

.btn-primary {
  background-color: var(--brand-primary);
  color: var(--brand-navy-dark);
}

.btn-primary:hover {
  background-color: var(--brand-primary-dark);
}

/* ---- Example: Gold Accent Line ---- */

.brand-line {
  background-color: var(--brand-primary);
}

/* ---- Example: Dark Section ---- */

.section-dark {
  background-color: var(--ink-900);
  color: var(--text-on-dark);
}

/* ---- Example: Gold Text ---- */

.text-brand {
  color: var(--brand-primary);
}

/* ---- Example: Navy Text ---- */

.text-navy {
  color: var(--brand-navy);
}