:root {

    /* ── Brand ──────────────────────────────────────────────────────────── */
    --red:          #E11B22;
    --red-dark:     #9F151A;
    --green:        #0DB14B;

    /* ── Dark Scale ─────────────────────────────────────────────────────── */
    --black:        #28211F;   /* text-dark */
    --dark:         #111214;
    --dark-2:       #18191C;
    --border:       #2E3035;

    /* ── Light Scale ────────────────────────────────────────────────────── */
    --white:        #FFFFFF;
    --off-white:    #ffffff;
    --gray-100:     #ffffff;
    --gray-200:     #DCDDDE;
    --gray-300:     #BDBEC0;   /* midpoint of 200 ↔ 400 */
    --gray-400:     #9D9EA2;
    --gray-500:     #808184;   /* midpoint of 400 ↔ 600 */
    --gray-600:     #636466;
    --gray-700:     #3F4042;   /* darker than 600, before --dark; body-text gray */
    --ultra-light-blue: #F5FCFF;

    /* ── Typography ─────────────────────────────────────────────────────── */
    --font-display: 'Oxanium', sans-serif;
    --font-body:    system-ui, 'Inter', -apple-system, sans-serif;

    /* ── Type Scale (fluid) ─────────────────────────────────────────────── */
    --fs-display: clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem);    /* 40→72px */
    --fs-h1:      clamp(1.75rem, 1.35rem + 1.9vw, 2.375rem); /* 28→38px */
    --fs-h2:      clamp(1.75rem, 1.35rem + 1.9vw, 2.375rem); /* 28→38px */
    --fs-h3:         clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
    --fs-subheading: clamp(1.2rem, 1.05rem + 0.75vw, 1.6rem);
    --fs-body:    0.95rem;
    --fs-caption: 0.72rem;
    --fs-breadcrumb: 0.8rem;        /* between caption and body — breadcrumb bar */
    --text-body:  var(--fs-body);   /* alias: used as a font-size in content.css */

    /* ── Spacing ────────────────────────────────────────────────────────── */
    --space-xs:     4px;
    --space-sm:     8px;
    --space-md:     16px;
    --space-lg:     24px;
    --space-xl:     32px;
    --space-2xl:    48px;
    --space-3xl:    64px;
    --section-gap:  clamp(48px, 32px + 3.5vw, 80px);

    /* ── Layout ─────────────────────────────────────────────────────────── */
    --max-w:        1380px;
    --radius:       2px;
    --radius-image: 4px;   /* content-body images only (.article-content img) — intentional exception to the 2px rule */

    /* ── Extended Design-System Tokens ──────────────────────────────────── */

    /* Color aliases — --color-* convention for new code */
    --color-red:          var(--red);
    --color-red-dark:     var(--red-dark);
    --color-black:        #000000;           /* pure black, distinct from --black */
    --color-dark:         var(--dark);
    --color-dark-2:       var(--dark-2);
    --color-border-dark:  var(--border);
    --color-white:        var(--white);
    --color-off-white:    var(--off-white);
    --color-gray-200:     var(--gray-200);
    --color-gray-400:     var(--gray-400);
    --color-gray-600:     var(--gray-600);
    --color-text:         var(--black);      /* #28211F */
    --color-text-muted:   var(--gray-600);
    --color-text-soft:    var(--gray-400);

    /* Layout tokens — --container-* used for responsive overrides */
    --container-max:      var(--max-w);
    --container-wide:     calc(var(--container-max) + 160px);
    --container-padding:  24px;

    /* Section spacing — named variants */
    --space-section:      var(--section-gap);  /* 80px */
    --space-section-lg:   112px;
    --space-section-sm:   56px;

    /* Header / footer */
    --header-height:      72px;
    --footer-padding-y:   var(--space-3xl);

    /* Motion */
    --transition-fast:    160ms ease;
    --transition-base:    220ms ease;
}