:root {
  /* ── L1 PRIMITIVES ── */

  /* Blues */
  --prim-blue-flag:  #0062b8;
  --prim-blue-dark:  #00488a;
  --prim-blue-deep:  #003370;
  --prim-blue-mid:   #0077d4;
  --prim-blue-text:  #0d2a5c;
  --prim-blue-muted: #4a6890;
  --prim-blue-body:  #1a3060;

  /* Glass */
  --prim-glass:        rgba(255, 255, 255, 0.14);
  --prim-glass-md:     rgba(255, 255, 255, 0.22);
  --prim-glass-card:   rgba(255, 255, 255, 0.88);
  --prim-glass-border: rgba(255, 255, 255, 0.35);
  --prim-card-border:  rgba(255, 255, 255, 0.70);
  --prim-white-muted:  rgba(255, 255, 255, 0.60);

  /* Spacing scale (8px base) */
  --space-xxs:   4px;
  --space-xs:    8px;
  --space-s:    12px;
  --space-m:    16px;
  --space-l:    24px;
  --space-xl:   32px;
  --space-xxl:  48px;
  --space-xxxl: 64px;

  /* Semantic spacing aliases */
  --space-section:    var(--space-xl);
  --space-block:      var(--space-m);
  --space-inline:     var(--space-xxs);
  --space-screen-pad: 20px;

  /* Typography */
  --font-heading: 'Cormorant Garamond', serif;
  --font-body:    'DM Sans', sans-serif;

  /* ── L2 SEMANTIC (M3 color roles) ── */

  --color-primary:            var(--prim-blue-flag);
  --color-on-primary:         #ffffff;
  --color-surface:            #ffffff;
  --color-surface-container:  var(--prim-glass-card);
  --color-on-surface:         var(--prim-blue-text);
  --color-on-surface-variant: var(--prim-blue-muted);
  --color-outline:            var(--prim-glass-border);
  --color-outline-variant:    rgba(0, 80, 180, 0.10);

  /* Named semantic roles */
  --color-nav:     rgba(0, 60, 130, 0.65);
  --color-heading: var(--prim-blue-deep);
  --color-muted:   var(--prim-white-muted);

  /* Status colors (M3 extended) */
  --color-success-container:    #d6f0e0;
  --color-on-success-container: #1a8040;
  --color-info-container:       #dce8ff;
  --color-on-info-container:    #1a4fcc;
  --color-error-container:      #fff0f0;
  --color-on-error-container:   #8b0000;
  --color-warning-container:    #fffbeb;
  --color-on-warning-container: #7a5500;

  /* ── BUTTON TOKENS ── */
  --btn-primary:         var(--prim-blue-flag);
  --btn-primary-hover:   var(--prim-blue-mid);
  --btn-primary-text:    #ffffff;
  --btn-secondary:       #e4edf8;
  --btn-secondary-hover: #ccddf0;
  --btn-secondary-text:  var(--prim-blue-text);
  --btn-danger:          #b91c1c;
  --btn-danger-hover:    #dc2626;
  --btn-danger-text:     #ffffff;
}