:root{
  /* ===== PRIMARY: RUBY RED ===== */
  --ruby-100: #F2D9DE;   /* pale tint — subtle backgrounds, hover fills */
  --ruby-200: #E14E67;   /* bright — highlights, gloss, small accents */
  --ruby-300: #C13A50;   /* light-mid — hover states */
  --ruby-400: #9E1B32;   /* BASE — primary brand red */
  --ruby-600: #8A1B2C;   /* mid-dark */
  --ruby-800: #4E0D17;   /* deep */
  --ruby-900: #3A0810;   /* deepest — shadow facets only */

  /* ===== PRIMARY: OIL BLACK ===== */
  --black-100: #4B4239;  /* lightest charcoal — borders on dark */
  --black-300: #2A2520;  /* charcoal */
  --black-500: #1C1815;  /* BASE — primary ink, logo, body text */
  --black-700: #171310;  /* deep charcoal */
  --black-900: #0B0B0C;  /* void — page backgrounds, deepest panels */

  /* ===== NEUTRALS ===== */
  --paper:  #F1EAD9;     /* primary light background */
  --paper-2:#E4D9C2;     /* deeper paper — cards on paper */
  --paper-line: #CBBFA4; /* hairline on paper */
  --cream:  #FBF8F2;     /* nearest to white — text on dark, panels */

  /* ===== SECONDARY: BRASS ===== */
  /* Ties to the metals side of the business — value, weight, an antique
     coin/ingot feel. Used sparingly: tags, secondary CTAs, dividers. */
  --brass-200: #C9A662;
  --brass-400: #A6822F;
  --brass-700: #6E551D;

  /* ===== SECONDARY: PETROL ===== */
  /* Ties to the oil & gas side — a deep, cool counterweight to the warm
     ruby/brass pairing. Used for data visualization, secondary UI states,
     outline buttons. */
  --petrol-200: #4E7B85;
  --petrol-400: #22434B;
  --petrol-700: #12262B;

  /* ===== FUNCTIONAL ===== */
  --ok: #3E6B4F;         /* verified / success states only */

  /* ===== TYPE ===== */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'IBM Plex Sans', -apple-system, Segoe UI, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;
}