/* ============================================================
   DESIGN TOKENS
============================================================ */

:root {
    /* Colors */
    --color-text-main: #7C7C7C;
    --color-text-dark: #000000;
    --color-primary: #255F85;
    --color-primary-strong: rgba(0, 59, 85, 1);
    --color-primary-accent: #00527A;
    --color-text-faded: rgba(171, 171, 171, 1);

    --color-bg-light: rgba(241, 247, 248, 0.57);
    --color-bg-info: rgba(241, 247, 248, 0.97);
    --color-bg-placeholder: #E7EAEE;
    --color-bg-footer: #F9F9FC;

    --color-border-soft: #E0E0E0;
    --color-button-secondary-bg: #EAEAEA;

    --color-border-bottom-divider: rgba(229, 229, 229, 1);

    /* Typography */
    --font-family-base: 'Inter', sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 22px;
    --font-size-2xl: 26px;
    --font-size-3xl: 28px;
    --font-size-4xl: 40px;
    --font-size-5xl: 56px;

    /* Spacing */
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 24px;
    --space-2xl: 30px;
    --space-3xl: 40px;
    --space-4xl: 60px;
    --section-space: 64px;
    --section-space-double: 128px;
    --space-5xl: 80px;
    --page-space: 112px;
    --2column-gap: 120px;

    /* Layout */
    --max-width-narrow: 700px;
    --max-width-content: 960px;
    --max-width-wide: 1440px;

    /* Misc */
    --border-radius-pill: 999px;
    --border-radius-lg: 20px;
}