:root {
    color-scheme: light dark;

    /* Surface / Main */
    --surface-main-soft: light-dark(var(--white-80), var(--black-70));
    --surface-main-balanced: light-dark(var(--white-90), var(--black-80));
    --surface-main-sharp: light-dark(var(--white-100), var(--black-90));

    /* Surface / Elevated */
    --surface-elevated-soft: light-dark(var(--white-80), var(--black-80));
    --surface-elevated-balanced: light-dark(var(--white-70), var(--black-70));
    --surface-elevated-sharp: light-dark(var(--white-60), var(--black-60));
    --surface-elevated-contrasting: light-dark(var(--white-100), var(--black-80));

    /* Border */
    --border-soft: light-dark(var(--white-60), var(--black-60));
    --border-balanced: light-dark(var(--white-50), var(--black-50));
    --border-sharp: light-dark(var(--white-40), var(--black-40));

    /* Text */
    --text-primary: light-dark(var(--black-60), var(--white-50));
    --text-secondary: light-dark(var(--black-30), var(--white-30));
    --text-tertiary: light-dark(var(--white-20), var(--white-10));
    --text-link: light-dark(var(--brand-100), var(--brand-70));
    --text-on-brand-primary: var(--white-100);

    /* Situation / Info */
    --situation-info-soft: light-dark(var(--blue-10), var(--blue-100));
    --situation-info-balanced: light-dark(var(--blue-30), var(--blue-90));
    --situation-info-sharp: light-dark(var(--blue-60), var(--blue-40));
    --situation-info-shade: light-dark(var(--blue-80), var(--blue-30));

    /* Situation / Warning */
    --situation-warning-soft: light-dark(var(--amber-10), var(--amber-100));
    --situation-warning-balanced: light-dark(var(--amber-30), var(--amber-90));
    --situation-warning-sharp: light-dark(var(--amber-70), var(--amber-60));
    --situation-warning-shade: light-dark(var(--amber-80), var(--amber-50));

    /* Situation / Error */
    --situation-error-soft: light-dark(var(--red-10), var(--red-100));
    --situation-error-balanced: light-dark(var(--red-20), var(--red-90));
    --situation-error-sharp: light-dark(var(--red-60), var(--red-60));
    --situation-error-shade: light-dark(var(--red-70), var(--red-50));

    /* Situation / Success */
    --situation-success-soft: light-dark(var(--green-10), var(--green-100));
    --situation-success-balanced: light-dark(var(--green-20), var(--green-90));
    --situation-success-sharp: light-dark(var(--green-70), var(--green-70));
    --situation-success-shade: light-dark(var(--green-80), var(--green-60));

    /* State / Disabled */
    --state-disabled-soft: light-dark(var(--white-50), var(--black-80));
    --state-disabled-balanced: light-dark(var(--white-40), var(--black-60));
    --state-disabled-sharp: light-dark(var(--white-30), var(--black-30));

    /* State / Selected */
    --state-selected-soft: light-dark(var(--brand-10), var(--brand-shade-100));
    --state-selected-balanced: light-dark(var(--brand-40), var(--brand-shade-90));
    --state-selected-sharp: light-dark(var(--brand-100), var(--brand-100));

    /* Brand / Primary */
    --brand-primary-soft: light-dark(var(--brand-20), var(--brand-shade-100));
    --brand-primary-balanced: light-dark(var(--brand-50), var(--brand-shade-70));
    --brand-primary-sharp: light-dark(var(--brand-100), var(--brand-100));
    --brand-primary-shade: light-dark(var(--brand-shade-30), var(--brand-60));

    /* Brand / Secondary */
    --brand-secondary-soft: light-dark(var(--turquise-10), var(--turquise-100));
    --brand-secondary-balanced: light-dark(var(--turquise-40), var(--turquise-70));
    --brand-secondary-sharp: light-dark(var(--turquise-60), var(--turquise-50));
    --brand-secondary-shade: light-dark(var(--turquise-70), var(--turquise-40));

    /* Utility */
    --utility-overlay: light-dark(#343943b8, #0a0b0dc7);
    /* Fix colors are intentionally constant across modes - see docs/conventions/design-tokens.md. */
    --utility-fix-coal: var(--black-60);
    --utility-fix-white: var(--white-100);
    --utility-hover: light-dark(var(--white-80), var(--black-70));

    /* Inversed */
    --inversed-soft: light-dark(var(--white-40), var(--black-40));
    --inversed-balanced: light-dark(var(--white-10), var(--black-10));
    --inversed-sharp: light-dark(var(--black-70), var(--white-70));
    --inversed-shade: light-dark(var(--black-80), var(--white-80));

    /**********************/
    /* Dimension (Figma)  */
    /**********************/
    --corner-radius-small: 4px;
    --corner-radius-medium: 8px;
    --corner-radius-large: 16px;
    --corner-radius-full: 96px;
    --space-space-0: 0px;
    --space-space-1: 4px;
    --space-space-2: 8px;
    --space-space-3: 12px;
    --space-space-4: 16px;
    --space-space-6: 24px;
}

:root[data-theme='light'] {
    color-scheme: light;
}