/* Central frontend design system. See ai/design-system.md. */
:root {
    /* Palette: surfaces, borders and interactive colors keep their distinct roles. */
    --color-primary: #0f838a;
    --color-primary-muted: #5B9A98;
    --color-secondary: #B2CB07;
    --color-tertiary: #F073B7;
    --color-text-dark: #000000;
    --color-text-ink: #101114;
    --color-text-light: #EFEFE0;
    --color-white: #FFFFFF;
    --color-surface-card: #FCFBF6;
    --color-border-card: #BFC0BC;
    --color-text-charcoal: #3A3A3A;
    --color-text-teal-deep: #164B49;
    --color-border-subtle: rgb(0 0 0 / 10%);
    --color-text-purple-ink: #17101E;
    --color-border-tag: rgb(23 15 34 / 12%);
    --color-surface-petrol-black: #0B1A1C;
    --color-text-gray-light: #BFBFBF;
    --color-text-lime: #8FC037;
    --color-border-inverse-subtle: rgb(255 255 255 / 10%);
    --color-border-petrol-subtle: rgb(11 26 28 / 10%);

    --color-text-slate: #666B75;

    --color-text-gray-cool: #8F9397;

    --color-text-sage-gray: #848A88;

    --color-text-muted-teal: #587273;

    /* Responsive visual typography; independent of editorial HTML levels. */
    --font-family-base: Inter, sans-serif;
    --font-size-h1: clamp(46px, calc(22px + 3.333333vw), 70px);
    --font-size-h2: clamp(34px, calc(20px + 2.777778vw), 48px);
    --font-size-h3: clamp(22px, calc(20px + .277778vw), 24px);
    --font-size-h4: clamp(18px, calc(16px + .277778vw), 20px);
    --font-size-body: clamp(16px, calc(14px + .277778vw), 18px);
    --font-size-small: 16px;
    --font-size-eyebrow: 11px;
    --font-size-description: 14px;
    --font-size-caption: 13px;
    --font-size-meta: 12px;
    --font-size-navigation: 14px;
    --font-size-button: 14px;
    --line-height-h1: .98;
    --line-height-h2: 1.04;
    --line-height-h3: 1.2;
    --line-height-h4: 1.2;
    --line-height-body: 1.55;
    --line-height-description: 1.6;
    --line-height-list: 1.5;
    --line-height-label: 1.4;
    --line-height-button: 1.2142857143;
    --font-weight-regular: 400;
    --font-weight-bold: 700;

    /* Shared spacing and container geometry. */
    --spacing-xs: 8px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 40px;
    --spacing-2xl: 56px;
    --spacing-section: clamp(80px, calc(16px + 8.888889vw), 144px);
    --container-width: 1200px;
    --container-width-wide: 1440px;
    --container-padding: 24px;
    --container-padding-wide: 64px;

    /* Shared shape and controls. */
    --radius-pill: 999px;
    --radius-card: 15px;
    --radius-list: 24px;
    --radius-card-compact: 12px;
    --button-padding-block: 14px;
    --button-padding-inline: 18px;
    --button-gap: 16px;
}