/* ===========================================================
   REFINED HYBRID TRAINING — DESIGN TOKENS
   Brand colors per owner brand handoff: Onyx / Bone / Brass
   =========================================================== */

:root {
  /* ---- Brand colors ---- */
  --color-onyx: #0b0b0c;
  --color-onyx-soft: #141416;
  --color-onyx-line: #232326;
  --color-bone: #f3ede3;
  --color-bone-dim: #cfc8ba;
  --color-brass: #aa8e69;
  --color-brass-light: #c7ac86;
  --color-brass-dark: #8a7053;

  /* ---- Semantic aliases ---- */
  --bg-dark: var(--color-onyx);
  --bg-dark-soft: var(--color-onyx-soft);
  --bg-light: var(--color-bone);
  --text-on-dark: var(--color-bone);
  --text-on-dark-dim: var(--color-bone-dim);
  --text-on-light: var(--color-onyx);
  --accent: var(--color-brass);
  --accent-hover: var(--color-brass-light);
  --border-on-dark: var(--color-onyx-line);
  --border-on-light: rgba(11, 11, 12, 0.15);

  /* ---- Typography ---- */
  --font-heading: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 1rem;      /* 16px */
  --space-4: 1.5rem;    /* 24px */
  --space-5: 2rem;      /* 32px */
  --space-6: 3rem;      /* 48px */
  --space-7: 4rem;      /* 64px */
  --space-8: 6rem;      /* 96px */

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 2px;
  --radius-md: 4px;
  --header-height: 84px;

  /* ---- Motion ---- */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;

  /* ---- Shadow ---- */
  --shadow-card: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
}

/* Breakpoints (referenced in media queries as literal px values):
   --bp-tablet:  600px
   --bp-desktop: 900px
   --bp-wide:    1200px
*/