/* ============================================================
   COBALT IRON — SKIN / THEME TOKENS
   CURRENT THEME: Deep Navy + Electric Blue → Vivid Green
   Guidance: "Future-Proofing Data Protection" infographic set —
   dark navy canvas, white headlines, blue-to-green gradient glow.
   ============================================================ */

:root {
  /* Brand color palette — dark blue/green */
  --color-navy:        #071021;   /* deepest navy — header bar, footer, hero start, video slots */
  --color-cobalt:      #1d9bf0;   /* electric blue — links, CTAs, kickers (headline blue) */
  --color-cobalt-deep: #0e9f6e;   /* vivid teal-green — gradient end, hover states */
  --color-accent:      #34e27a;   /* bright green glow — highlights, checkmarks, stats */
  --color-ink:         #e6edf7;   /* body text — soft white */
  --color-slate:       #93a3bd;   /* secondary text — muted blue-gray */
  --color-line:        #1f2f4d;   /* borders, dividers — steel blue */
  --color-bg:          #0a1428;   /* page background — dark navy canvas */
  --color-bg-soft:     #0e1a33;   /* alternating section background */
  --color-warn:        #ff7a59;   /* competitor "no/limited" marks — readable on dark */
  --color-heading:     #ffffff;   /* headings & emphasized text — white like the artwork */

  /* Typography */
  --font-body: Calibri, Carlito, "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-head: Calibri, Carlito, "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --text-base: 17px;
  --leading:   1.6;

  /* Shape & depth — soft glow shadows to echo the neon artwork */
  --radius:     14px;
  --radius-sm:  8px;
  --shadow:     0 10px 40px rgba(29, 155, 240, .18);
  --shadow-sm:  0 4px 14px rgba(0, 0, 0, .4);

  /* Layout */
  --maxw:       1160px;
  --gutter:     24px;
  --section-y:  44px;

  /* Logos (white variant for dark header/footer) */
  --logo-header: url("../img/CobaltIronLogoBlueWhite.png");
  --logo-footer: url("../img/CobaltIronLogoBlueWhite.png");
}