:root {

    /* =========================================================
       TYPOGRAPHY
       ========================================================= */

    /* Families */
    --main-font: "Literata", sans-serif;
    --body-font: "Literata", sans-serif;
    --secondary-font: "Sora", sans-serif;

    /* Weights */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Sizes */
    --font-size-XXL: 64px;
    --font-size-XL: 32px;
    --font-size-L: 24px;
    --font-size-M: 18px;
    --font-size-S: 15px;
    --font-size-XS: 13px;


    /* =========================================================
       FOREGROUND COLORS
       ========================================================= */

    --primary-color: #1f1f1f;
    --secondary-color: #838383;
    --tertiary-color: #ffcc00;


    /* =========================================================
       SURFACES
       ========================================================= */

    /* Canonical semantic surface tokens */
    --surface-page: #ffffff;
    --surface-footer: #f5f5f5;
    --surface-hero: #c8def0;
    --surface-overlay: #4a4945;

    /*
       Legacy aliases.
       Keep these temporarily so existing sections do not break
       while their CSS is migrated to the semantic surface names.
    */
    --bg-color: var(--surface-page);
    --surf-base-light: var(--surface-page);
    --surf-med-light: var(--surface-overlay);
    --surf-low-light: #3f3e3a;
    --surf-footer: var(--surface-footer);
    --intro-hero-bg: var(--surface-hero);


    /* =========================================================
       GLOBAL LAYOUT
       ========================================================= */

    --navbar-height: 86px;
    --navbar-logo-height: 13px;
    --navbar-icon-size: 40px;

    --page-gutter: 40px;
    --page-max-width: 960px;

    --content-space-top: 24px;
    --content-space-bottom: 80px;
    
    --page-max-width: 960px;
    --navbar-max-width: 1100px;


    /* =========================================================
       COMPONENTS
       ========================================================= */

    /* CTA — compact */
    --cta-height: 60px;
    --cta-padding-x: 24px;
}


/* =============================================================
   WIDE — 610–779
   ============================================================= */

@media (min-width: 610px) {
    :root {
        --page-gutter: 70px;

        --content-space-top: 70px;
        --content-space-bottom: 70px;

        --cta-height: 60px;
        --cta-padding-x: 32px;
    }
}


/* =============================================================
   EDITORIAL — 780–1199
   ============================================================= */

/*
   No token overrides are currently needed here.
   Editorial keeps the WIDE gutter and vertical spacing;
   the composition change lives in each layout/page stylesheet.
*/


/* =============================================================
   MAX — 1200+
   ============================================================= */

@media (min-width: 1200px) {
    :root {
        --content-space-top: 120px;
        --content-space-bottom: 120px;
    }
}