@font-face {
    font-family: "Quicksand";
    src: url("../fonts/quicksand/Quicksand[wght].ttf") format("truetype");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Foundation tokens: the small global token set for DS features and shortcodes */

    /* Typography primitives */
    --f12-font-family-sans:
        "Quicksand", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter,
        Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
        sans-serif;

    --f12-font-size-2xs: 0.70rem;
    --f12-font-size-xs: 0.825rem;
    --f12-font-size-sm: 0.9rem;
    --f12-font-size-md: 1rem;
    --f12-font-size-lg: 1.125rem;
    --f12-font-size-xl: 1.25rem;
    --f12-font-size-2xl: 1.5rem;
    --f12-font-size-3xl: 2rem;
    --f12-font-size-4xl: 2.5rem;

    --f12-font-weight-regular: 400;
    --f12-font-weight-medium: 500;
    --f12-font-weight-semibold: 600;
    --f12-font-weight-bold: 700;

    --f12-line-height-tight: 1.15;
    --f12-line-height-base: 1.5;

    --f12-letter-spacing-tight: -0.02em;
    --f12-letter-spacing-caps: 0.12em;
    --f12-letter-spacing-editorial: 0.25em;

    /* Internal DS text-style recipe tokens */
    --f12-text-style-heading-sm-size: clamp(
        1.0625rem,
        1.02rem + 0.22vw,
        var(--f12-font-size-lg)
    );
    --f12-text-style-heading-sm-line-height: 1.3;
    --f12-text-style-heading-sm-font-weight: var(--f12-font-weight-bold);
    --f12-text-style-heading-sm-letter-spacing: var(--f12-letter-spacing-tight);

    --f12-text-style-heading-md-size: clamp(1.25rem, 1.06rem + 0.95vw, 1.6rem);
    --f12-text-style-heading-md-line-height: 1.3;
    --f12-text-style-heading-md-font-weight: var(--f12-font-weight-bold);
    --f12-text-style-heading-md-letter-spacing: var(--f12-letter-spacing-tight);

    --f12-text-style-heading-lg-size: clamp(
        1.7rem,
        1.34rem + 1.25vw,
        var(--f12-font-size-3xl)
    );
    --f12-text-style-heading-lg-line-height: var(--f12-line-height-tight);
    --f12-text-style-heading-lg-font-weight: var(--f12-font-weight-bold);
    --f12-text-style-heading-lg-letter-spacing: var(--f12-letter-spacing-tight);

    --f12-text-style-heading-xl-size: clamp(
        2rem,
        1.45rem + 1.9vw,
        var(--f12-font-size-4xl)
    );
    --f12-text-style-heading-xl-line-height: var(--f12-line-height-tight);
    --f12-text-style-heading-xl-font-weight: var(--f12-font-weight-bold);
    --f12-text-style-heading-xl-letter-spacing: var(--f12-letter-spacing-tight);

    --f12-text-style-body-md-size: clamp(
        0.95rem,
        0.92rem + 0.15vw,
        var(--f12-font-size-md)
    );
    --f12-text-style-body-md-line-height: var(--f12-line-height-base);
    --f12-text-style-body-md-font-weight: var(--f12-font-weight-medium);

    --f12-text-style-body-sm-size: clamp(
        0.875rem,
        0.86rem + 0.08vw,
        var(--f12-font-size-sm)
    );
    --f12-text-style-body-sm-line-height: var(--f12-line-height-base);
    --f12-text-style-body-sm-font-weight: var(--f12-font-weight-medium);

    --f12-text-style-body-muted-color: var(--f12-color-text-muted);

    --f12-text-style-meta-sm-size: var(--f12-font-size-sm);
    --f12-text-style-meta-sm-line-height: 1.25;
    --f12-text-style-meta-sm-font-weight: var(--f12-font-weight-medium);
    --f12-text-style-meta-sm-color: var(--f12-color-text-muted);

    --f12-text-style-meta-xs-size: var(--f12-font-size-xs);
    --f12-text-style-meta-xs-line-height: 1.2;
    --f12-text-style-meta-xs-font-weight: var(--f12-font-weight-medium);

    --f12-text-style-hero-excerpt-size: clamp(
        1rem,
        0.94rem + 0.4vw,
        var(--f12-font-size-lg)
    );
    --f12-text-style-hero-excerpt-line-height: var(--f12-line-height-base);
    --f12-text-style-hero-excerpt-color: rgba(255, 255, 255, 0.9);

    /* Spacing */
    --f12-space-0-5: 0.125rem;
    --f12-space-1: 0.25rem;
    --f12-space-2: 0.5rem;
    --f12-space-3: 0.75rem;
    --f12-space-4: 1rem;
    --f12-space-5: 1.25rem;
    --f12-space-6: 1.5rem;
    --f12-space-8: 2rem;
    --f12-space-10: 2.5rem;
    --f12-space-12: 3rem;
    --f12-space-16: 4rem;
    --f12-space-20: 5rem;
    --f12-space-24: 6rem;
    --f12-space-30: 7.5rem;

    /* Layout aliases consumed by DS primitives */
    --f12-layout-content-max: 1280px;

    --f12-layout-section-gap: var(--f12-space-30);
    --f12-layout-section-gap-mobile: var(--f12-space-20);
    --f12-layout-section-gap-tight: var(--f12-space-24);
    --f12-layout-section-gap-tight-mobile: calc(
        var(--f12-space-20) - var(--f12-space-2)
    );
    --f12-layout-section-gap-grouped: var(--f12-space-16);
    --f12-layout-section-gap-grouped-mobile: var(--f12-space-10);
    --f12-layout-section-gap-airy: calc(
        var(--f12-space-30) + var(--f12-space-6)
    );
    --f12-layout-section-gap-airy-mobile: var(--f12-space-24);

    /* Section intro is internal heading-group rhythm, not macro section spacing. */
    --f12-layout-section-intro-gap: var(--f12-space-4);
    --f12-layout-section-intro-gap-tight: var(--f12-space-3);
    --f12-layout-section-intro-gap-airy: var(--f12-space-5);

    --f12-layout-stack-gap-sm: var(--f12-space-2);
    --f12-layout-stack-gap-md: var(--f12-space-4);
    --f12-layout-stack-gap-lg: var(--f12-space-6);

    /* Radius */
    --f12-radius-1: 0.5rem;
    --f12-radius-2: 0.75rem;
    --f12-radius-3: 1rem;
    --f12-radius-pill: 999px;

    /* Semantic colors */
    --f12-color-text-heading: #333333;
    --f12-color-text-primary: #2d2d2d;
    --f12-color-text-muted: #757575;
    --f12-color-text-on-dark: #ffffff;
    --f12-color-text-on-overlay: #ffffff;

    --f12-color-surface-page: #ffffff;
    --f12-color-surface-card: #ffffff;
    --f12-color-surface-subtle: #f7f7f7;
    --f12-color-surface-overlay: rgba(0, 0, 0, 0.6);

    --f12-color-border-subtle: #2d2d2d1f;
    --f12-color-border-strong: rgba(45, 45, 45, 0.2);
    --f12-color-border-on-dark: rgba(255, 255, 255, 0.48);
    --f12-color-border-on-overlay: rgba(255, 255, 255, 0.45);
    --f12-color-border-on-overlay-strong: rgba(255, 255, 255, 0.5);

    --f12-color-brand-editorial: #a6201a;
    --f12-color-brand-editorial-contrast: #ffffff;
    --f12-color-brand-regional: #173c74;

    --f12-color-focus-outline: rgba(117, 117, 117, 0.4);
    --f12-color-focus-ring: rgba(117, 117, 117, 0.12);

    /* Shadows */
    --f12-shadow-1: 0 4px 20px rgba(0, 0, 0, 0.04);
    --f12-shadow-2: 0 12px 40px rgba(0, 0, 0, 0.08);
    --f12-shadow-surface-subtle: 0 2px 8px rgba(15, 23, 42, 0.06);
    --f12-shadow-surface-hover: 0 14px 28px rgba(15, 23, 42, 0.13),
        0 4px 10px rgba(15, 23, 42, 0.08);
    --f12-shadow-surface-raised: 0 12px 34px rgba(16, 24, 40, 0.14);
    --f12-shadow-feature: 0 16px 44px rgba(0, 0, 0, 0.14);
    --f12-shadow-overlay-soft: 0 6px 24px rgba(0, 0, 0, 0.3);
    --f12-shadow-overlay-strong: 0 14px 32px rgba(0, 0, 0, 0.4);
    --f12-shadow-overlay-pill: 0 10px 24px -18px rgba(0, 0, 0, 0.9);
    --f12-shadow-accent: 0 4px 10px rgba(0, 0, 0, 0.18);

    /* Motion */
    --f12-ease-standard: cubic-bezier(0.165, 0.84, 0.44, 1);
    --f12-duration-fast: 150ms;
    --f12-duration-normal: 280ms;
}