:root {

  /* ===========================
     ISS Training Academy Theme
     Professional security training focused on safety, discipline, and career growth.
     =========================== */

  /* Primary brand */
  --brand-olive-900: #24301F;
  --brand-olive-700: #3A4A2B;
  --brand-olive-500: #556B2F;
  --brand-olive-200: #A8B08A;

  /* Background / neutral (warm sandstone) */
  --sand-50:  #FBF4E6;
  --sand-100: #F2E3C7;
  --sand-200: #E6D0A8;
  --sand-400: #C8A977;

  /* Accent */
  --accent-gold-500: #C9A227;
  --accent-gold-300: #E2C66A;

  /* Logo highlight colour (use sparingly) */
  --accent-blue-500: #27B4E6;

  /* Text */
  --text-900: #1D1D1B;
  --text-700: #3A3A36;
  --text-500: #61615A;

  /* Surfaces */
  --surface: rgba(255,255,255,0.70);
  --surface-strong: rgba(255,255,255,0.85);
  --border-soft: rgba(36,48,31,0.18);

  /* ---------------------------
     Compatibility aliases
     (existing CSS expects these)
     --------------------------- */
  --ink-900: var(--brand-olive-900);
  --ink-800: #2B3A25;

  --navy-900: var(--ink-900);
  --navy-800: var(--ink-800);

  /* Old "brand" becomes olive */
  --brand-500: var(--brand-olive-700);
  --brand-600: var(--brand-olive-900);
  --brand-700: var(--brand-olive-900); /* deeper press state */

  /* Warm accents */
  --warm-amber: var(--accent-gold-500);
  --warm-red: #B33A2B; /* kept for errors only */

  /* Neutrals */
  --slate-700: var(--text-700);
  --slate-600: var(--text-500);
  --slate-300: rgba(36,48,31,0.20);
  --slate-200: rgba(36,48,31,0.14);
  --slate-100: rgba(255,255,255,0.55);
  --white: #ffffff;

  /* Backgrounds */
  --bg: var(--sand-50);
  --bg-soft: var(--sand-100);
  --bg-steel: var(--sand-200);
  --bg-dark: var(--brand-olive-900);

  /* Typography */
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --fs-900: clamp(2rem, 1.6rem + 1.5vw, 3rem);
  --fs-800: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  --fs-700: 1.25rem;
  --fs-600: 1.1rem;
  --fs-500: 1rem;
  --fs-400: 0.9rem;

  /* Spacing */
  --s-2: .5rem;
  --s-4: 1rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-12: 3rem;
  --s-16: 4rem;

  /* Radius */
  --r-1: .5rem;
  --r-2: 1rem;
  --r-3: 1.5rem;

  /* Shadow */
  --shadow-1: 0 14px 38px rgba(36, 48, 31, .12);

  /* ===========================
     Developer palette rules
     ===========================
     - Do not use pure black text on sand; use --text-900 or --text-700
     - Use olive for structure (nav, headers, buttons)
     - Use gold only as an accent (badges, small highlights, important CTA)
     - Use blue sparingly (links/icons) to echo the logo highlight
  */
  /* Page background (marble sandstone) */
  --page-bg:
    radial-gradient(1200px 700px at 15% 20%, rgba(255,255,255,0.65), transparent 55%),
    radial-gradient(900px 650px at 85% 35%, rgba(255,184,140,0.10), transparent 60%),
    radial-gradient(1000px 900px at 55% 85%, rgba(255,255,255,0.45), transparent 60%),
    linear-gradient(135deg,
      transparent 0%,
      rgba(200,169,119,0.22) 18%,
      transparent 34%,
      rgba(85,107,47,0.10) 52%,
      transparent 68%,
      rgba(200,169,119,0.22) 82%,
      transparent 100%
    ),
    var(--sand-50);

}