:root {
  /* Brand colours */
  --navy-deep:  #030b27;
  --navy:       #0D1B4B;
  --navy-mid:   #132260;
  --cobalt:     #2240ff; /* #1A52D8; */
  --cobalt-hover: #001cd1;
  --cobalt-light: #3e75ff; /* #3e4cff */

  /* Neutral UI grays (no blue tint) */
  --fog:          #f2f2f2;
  --border:       #e5e5e5;
  --silver-light: #cccccc;
  --chrome:       #949494;
  --silver:       #949494;   /* design-system alias of --chrome */

  /* Blue-tint grays (COA badges and cobalt-adjacent accents) */
  --fog-blue:          #F0F4FB;
  --silver-light-blue: #c8d0de;
  --silver-blue:       #9EA8BC;
  --badge-coa-bg:      var(--fog-blue);
  --badge-coa-color:   var(--cobalt);

  --green:      #2A7D4F;
  --green-bg:   #EBF5EF;
  --ink:        #0D0D0D;
  --near-black: #0D0D0D;   /* design-system alias of --ink */
  --slate:      #6B7280;
  --white:      #FFFFFF;

  /* Typography */
  --font:       'TT Norms Pro', 'Hanken Grotesk', sans-serif;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extrabold:800;

  /* Spacing scale */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2.5rem;
  --space-xl:   4rem;
  --space-2xl:  6rem;

  /* Layout */
  --max-width:  1600px;
  --radius:     8px;
  --radius-lg:  12px;

  /* Transitions */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --duration:   0.25s;

  /* Extended brand palette */
  --navy-dark:       #0A1640;
  --red:             #DC2626;
  --red-dark:        #991B1B;
  --red-bg:          #FDECEC;
  --green-dark:      #166534;
  --amber:           #F59E0B;
  --orange-bg:       #FFEEDB;
  --orange-deep:     #B5450B;

  /* Border alpha tokens */
  --border-faint:    rgba(0,0,0,0.06);
  --border-subtle:   rgba(0,0,0,0.08);
  --border-mid:      rgba(0,0,0,0.10);
  --border-strong:   rgba(0,0,0,0.15);

  /* Cobalt alpha tints */
  --cobalt-faint:    rgba(26,82,216,0.04);
  --cobalt-dim:      rgba(26,82,216,0.06);
  --cobalt-subtle:   rgba(26,82,216,0.08);
  --cobalt-tint:     rgba(26,82,216,0.12);
  --cobalt-mist:     rgba(26,82,216,0.15);
  --cobalt-glow:     rgba(26,82,216,0.18);
  --cobalt-ring:     rgba(26,82,216,0.30);
  --cobalt-shadow:   rgba(26,82,216,0.35);

  /* Green alpha tints */
  --green-tint:      rgba(42,125,79,0.10);
  --green-tint-mid:  rgba(42,125,79,0.12);
  --green-ring:      rgba(42,125,79,0.25);

  /* Purple (featured badge) */
  --purple:          #7C3AED;
  --purple-bg:       #F3EFFE;

  /* Navy / red alpha tints */
  --navy-tint:       rgba(13,27,75,0.05);
  --red-tint:        rgba(220,38,38,0.08);

  /* White on dark (navy / cobalt backgrounds) */
  --white-faint:     rgba(255,255,255,0.06);
  --white-subtle:    rgba(255,255,255,0.08);
  --white-low:       rgba(255,255,255,0.12);
  --white-faded:     rgba(255,255,255,0.35);
  --white-mid:       rgba(255,255,255,0.40);
  --white-half:      rgba(255,255,255,0.50);
  --white-dim:       rgba(255,255,255,0.55);
  --white-muted:     rgba(255,255,255,0.65);
  --white-soft:      rgba(255,255,255,0.72);
  --white-pale:      rgba(255,255,255,0.75);
  --white-strong:    rgba(255,255,255,0.80);
}