:root {
    /* ---- Design System ---- */

    /* Figma Page Dimensions - W: 1720px H: 1028px */
    --figma-page-width: 1720px;
    --figma-page-height: 1028px;
    --figma-aspect-ratio: 1.673; /* 1720/1028 */

    /* Standardized page container */
    --page-max-width: min(100vw, var(--figma-page-width));
    --page-height: min(100vh, calc(var(--page-max-width) / var(--figma-aspect-ratio)));


    /* -- Colors -- */

    /* Brand colors */
    --forest: #004C45;
    --fern: #006F61;
    --lichen: #E5EFDA;

    /* Text colors */
    --text-primary: #000;
    --text-contrast: #FFF;
    --text-secondary: #004C45;
    --text-disabled: #738B9C;

    /* Icon colors */
    --icon-primary: #004C45;
    --icon-contrast: #FFF;
    --icon-disabled: #878787;
    --icon-error: #BC1A23;
    --icon-warning: #F59E0B;

    /* Surface colors */
    --surface-default: #FFF;
    --surface-error: #F8D2D4;
    --surface-warning: #FFF4E5;
    --surface-primary-subtle: #F8FBF6;
    --surface-primary-default: #E5EFDA;
    --surface-primary-light: #F5FEEA;
    --surface-primary-contrast: #004C45;
    --surface-secondary-default: #F6F3D7;
    --surface-secondary-subtle: #FFFEF5;
    --surface-secondary-contrast: #CFA862;

    /* Stroke colors */
    --stroke-accent: #CFA862;
    --stroke-light: #CECECE;
    --stroke-default: #878787;
    --stroke-subtle: #EFEFEF;

    /* -- Typography -- */

    /* Font family */
    --family-default: 'Montserrat', sans-serif;

    /* Font sizes */
    --size-xs: 12px;
    --size-s: 14px;
    --size-m: 16px;
    --size-l: 18px;
    --size-xl: 20px;
    --size-display-xxs: 16px;
    --size-display-xs: 24px;
    --size-display-s: 30px;
    --size-display-m: 36px;
    --size-display-l: 42px;
    --size-display-xl: 48px;

    /* Font heights */
    --line-height-m: 20px;
    --line-height-l: 30px;
    --line-height-xl: 36px;
    --line-height-2xl: 44px;

    /* Font weights */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-large: 700;

    /* -- Spacing & Sizes -- */

    /* Line heights */
    --height-display-s: 38px;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-s: 12px;
    --spacing-m: 20px;
    --spacing-l: 60px;
    --spacing-xl: 180px;
    --spacing-s-1: 12px;
    --spacing-xs-2: 8px;

    /* Radius */
    --radius-xs: 4px;

    /* Shadow tokens */
    --shadow-modal: 0 0 10px rgb(0 0 0 / 30%);
}