/*
Global Tokens
*/

:root {

    /*
    Colors
    */
    --color-primary: #000;
    --color-secondary: #fff;
    --color-text: #242424;
    --color-accent: #000;
    --color-background: #fff;
    --color-description: #242424;
    --color-muted: #666;
    --color-white: #fff;
    --color-black: #000;

    /*
    Colors / Semantic helpers
    */
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-accent);
    --color-focus: var(--color-primary);
    --color-border: rgba(0, 0, 0, 0.12);
    --color-border-soft: rgba(0, 0, 0, 0.08);

    /*
    Spacing primitives
    */
    --space-4: 0.25rem; /* 4px */
    --space-8: 0.5rem; /* 8px */
    --space-12: 0.75rem; /* 12px */
    --space-14: 0.875rem;
    --space-16: 1rem; /* 16px */
    --space-20: 1.25rem; /* 20px */
    --space-24: 1.5rem; /* 24px */
    --space-28: 1.75rem; /* 28px */
    --space-32: 2rem; /* 32px */
    --space-40: 2.5rem; /* 40px */
    --space-48: 3rem; /* 48px */
    --space-64: 4rem; /* 64px */
    --space-80: 5rem; /* 80px */

    /*
    Semantic spacing
    */
    --space-2xs: var(--space-4);
    --space-xs: var(--space-8);
    --space-sm: var(--space-12);
    --space-md: var(--space-16);
    --space-lg: var(--space-24);
    --space-xl: var(--space-32);
    --space-2xl: var(--space-48);
    --space-3xl: var(--space-64);
    --space-4xl: var(--space-80);

    /*
    Typography / Font Families
    */
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif: Georgia, serif;

    --font-body: var(--font-sans);
    --font-display: var(--font-serif);
    --font-lead: var(--font-serif);
    --font-section-title: var(--font-display);

    /*
    Typography primitives
    */
    --font-size-10: 0.625rem; /* 10px */
    --font-size-12: 0.75rem; /* 12px */
    --font-size-14: 0.875rem; /* 14px */
    --font-size-16: 1rem; /* 16px */
    --font-size-18: 1.125rem; /* 18px */
    --font-size-20: 1.25rem; /* 20px */
    --font-size-24: 1.5rem; /* 24px */
    --font-size-28: 1.75rem; /* 28px */
    --font-size-32: 2rem; /* 32px */
    --font-size-36: 2.25rem; /* 36px */
    --font-size-40: 2.5rem; /* 40px */
    --font-size-48: 3rem; /* 48px */
    --font-size-56: 3.5rem; /* 56px */
    --font-size-64: 4rem; /* 64px */
    --font-size-72: 4.5rem; /* 72px */

    /*
    Typography / Scale
    */
    --font-size-2xs: var(--font-size-10);
    --font-size-xs: var(--font-size-12);
    --font-size-sm: var(--font-size-14);
    --font-size-md: var(--font-size-16);
    --font-size-lg: var(--font-size-18);
    --font-size-xl: var(--font-size-24);
    --font-size-2xl: var(--font-size-32);
    --font-size-3xl: var(--font-size-48);
    --font-size-4xl: var(--font-size-56);

    /*
    Typography / Semantic Roles
    */
    --text-label: var(--font-size-xs);
    --text-meta: var(--font-size-sm);
    --text-small: var(--font-size-sm);
    --text-base: var(--font-size-md);
    --text-body: var(--text-base);
    --text-lead: var(--font-size-lg);
    --text-section-title: var(--font-size-xl);
    --text-display: var(--font-size-3xl);
    --text-title: var(--font-size-20);

    --text-title-xs: var(--font-size-lg);
    --text-title-sm: var(--font-size-xl);
    --text-title-md: var(--font-size-2xl);
    --text-title-lg: var(--font-size-2xl);
    --text-title-xl: var(--font-size-48);

    /*
    Typography / Weights
    */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /*
    Typography / Semantic Weights
    */
    --font-weight-body: var(--font-weight-regular);
    --font-weight-display: var(--font-weight-regular);
    --font-weight-title: var(--font-weight-bold);
    --font-weight-section-title: var(--font-weight-title);
    --font-weight-lead: var(--font-weight-body);
    --font-weight-label: var(--font-weight-medium);
    --font-weight-meta: var(--font-weight-regular);
    --font-weight-title-menu: var(--font-weight-bold);

    /*
    Line height
    */
    --lh-tight: 1.1;
    --lh-normal: 1.6;
    --lh-lead: 1.5;
    --lh-label: 1;
    --lh-meta: 1.3;
    --lh-section-title: var(--lh-tight);

    /*
    Tracking / Text transform
    */
    --tracking-title: 0;
    --tracking-section-title: 0;
    --tracking-display: 0;
    --tracking-lead: 0;
    --tracking-label: 0.06em;
    --tracking-meta: 0;
    --tracking-body: 0;

    --transform-label: uppercase;
    --transform-section-title: none;

    /*
    Links
    */
    --link-decoration: underline;
    --link-decoration-hover: underline;
    --link-underline-offset: 0.15em;

    /*
    Component defaults / Tag
    */
    --tag-color: currentColor;
    --tag-font: var(--font-body);
    --tag-size: var(--text-label);
    --tag-line-height: var(--lh-label);
    --tag-weight: var(--font-weight-label);
    --tag-tracking: var(--tracking-label);
    --tag-transform: var(--transform-label);

    /*
    Component defaults / Promo
    */
    --promo-media-gap: var(--space-lg);
    --promo-content-gap: var(--space-md);

    --promo-media-gap-hero: var(--space-lg);
    --promo-content-gap-hero: var(--space-md);

    --promo-media-gap-large: var(--space-md);
    --promo-content-gap-large: var(--space-sm);

    --promo-excerpt-max-width: 60ch;

    --promo-title-font: var(--font-display);
    --promo-title-size: var(--text-display);
    --promo-title-line-height: var(--lh-tight);
    --promo-title-tracking: var(--tracking-display);
    --promo-title-weight: var(--font-weight-display);

    --promo-excerpt-font: var(--font-lead);
    --promo-excerpt-size: var(--text-lead);
    --promo-excerpt-line-height: var(--lh-lead);
    --promo-excerpt-tracking: var(--tracking-lead);
    --promo-excerpt-weight: var(--font-weight-lead);

    --tile-promo-content-offset: var(--space-32);

    --promo-list-media-ratio: 23 / 13;

    /*
 Article / Editorial prose
 */
    --article-body-font: var(--font-serif);
    --article-body-weight: var(--font-weight-regular);
    --article-body-style: normal;
    --article-body-size: var(--font-size-16);
    --article-body-line-height: 1.5;
    --article-body-letter-spacing: 0;
    --article-body-color: var(--color-text);
    --article-body-gap: var(--space-24);

    --article-heading-font: var(--font-display);
    --article-heading-weight: var(--font-weight-bold);
    --article-heading-style: normal;
    --article-heading-line-height: var(--lh-tight);
    --article-heading-letter-spacing: var(--tracking-title);
    --article-heading-color: var(--color-text);

    --article-h1-size: var(--font-size-48);
    --article-h2-size: var(--font-size-32);
    --article-h3-size: var(--font-size-24);
    --article-h4-size: var(--font-size-20);
    --article-h5-size: var(--font-size-18);
    --article-h6-size: var(--font-size-16);

    --article-heading-space-before: var(--space-40);
    --article-heading-space-after: var(--space-16);

    --article-caption-font: var(--article-body-font);
    --article-caption-size: var(--font-size-xs);
    --article-caption-line-height: var(--lh-normal);
    --article-caption-color: var(--color-muted);

    --article-body-paragraph-gap: var(--space-28);

    --article-header-title-font: var(--font-display);
    --article-header-title-size: var(--article-h1-size);
    --article-header-title-line-height: var(--lh-tight);
    --article-header-title-weight: var(--font-weight-title);
    --article-header-title-tracking: var(--tracking-title);
    --article-header-title-color: var(--color-text);

    --article-link-color: var(--color-accent);
    --article-link-decoration: none;
    --article-link-hover-color: var(--color-accent);
    --article-link-hover-decoration: none;

    /*
    Layout
    */
    --container-width: 790px;
    --container-wide: 1200px;
    --container-padding: var(--space-md);

    --section-spacing: var(--space-xl);
    --section-spacing-lg: var(--space-3xl);

    /*
    Breakpoints
    Reference only. Do not use var() directly inside media queries.
    */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1200px;

}