:root {
    /* --- Primitive --- */
    /* --- Typography --- */
    --t-font-family-sans: "Montserrat", serif;
    --t-font-family-info: "Inter", serif;
    /*    --t-font-weight-xxl: 700;*/
    --t-font-weight-xl: 700;
    --t-font-weight-lg: 600;
    --t-font-weight-md: 500;
    --t-font-weight-sm: 400;
    /*    --t-font-weight-xs: 400;*/
    --t-font-size-xxxl: 48px;
    --t-font-size-xxl: 24px;
    --t-font-size-xl: 22px;
    --t-font-size-lg: 20px;
    --t-font-size-md: 16px;
    --t-font-size-sm: 14px;
    --t-font-size-xs: 12px;
    --t-font-size-xxs: 11px;
    --t-line-height-xxxl: 56px;
    --t-line-height-xxl: 32px;
    --t-line-height-xl: 30px;
    --t-line-height-lg: 28px;
    --t-line-height-md: 22px;
    --t-line-height-sm: 20px;
    --t-line-height-xs: 16px;
    --t-line-height-xxs: 15px;
    --t-letter-spacing-01: -0.005em;
    --t-letter-spacing-02: -0.01em;
    --t-letter-spacing-03: -0.02em;
    /* Spacing */
    --t-spacing-01: 2px;
    --t-spacing-02: 4px;
    --t-spacing-03: 6px;
    --t-spacing-04: 8px;
    --t-spacing-05: 10px;
    --t-spacing-06: 12px;
    --t-spacing-07: 14px;
    --t-spacing-08: 16px;
    --t-spacing-09: 18px;
    --t-spacing-10: 20px;
    --t-spacing-11: 24px;
    --t-spacing-12: 28px;
    --t-spacing-13: 32px;
    --t-spacing-14: 36px;
    --t-spacing-15: 40px;
    --t-spacing-16: 44px;
    --t-spacing-17: 48px;
    --t-spacing-18: 56px;
    --t-spacing-19: 60px;
    --t-spacing-20: 64px;
    /* Numbers */
    --t-number-01: 2px;
    --t-number-02: 4px;
    --t-number-03: 6px;
    --t-number-04: 8px;
    --t-number-05: 10px;
    --t-number-06: 12px;
    --t-number-07: 14px;
    --t-number-08: 16px;
    --t-number-09: 18px;
    --t-number-10: 20px;
    --t-number-11: 24px;
    --t-number-12: 28px;
    --t-number-13: 32px;
    --t-number-14: 36px;
    --t-number-15: 40px;
    --t-number-16: 44px;
    --t-number-17: 48px;
    --t-number-18: 52px;
    --t-number-19: 56px;
    --t-number-20: 60px;
    /* Radius */
    --t-radius-xxs: 2px;
    --t-radius-xs: 4px;
    --t-radius-sm: 6px;
    --t-radius-md: 8px;
    --t-radius-lg: 10px;
    --t-radius-xl: 12px;
    --t-radius-xxl: 20px;
    --t-radius-xxxl: 30px;
    --t-radius-pill: 9999px;
    /* Sementic / Component Specific */
    /* ----- Button Control ----- */
    --t-btn-height-lg: var(--t-spacing-16);
    --t-btn-height-md: var(--t-spacing-14);
    --t-btn-height-sm: var(--t-spacing-12);
    --t-btn-height-xs: var(--t-spacing-10);
    --t-btn-padding-lg: var(--t-spacing-10);
    --t-btn-padding-md: var(--t-spacing-08);
    --t-btn-padding-sm: var(--t-spacing-06);
    --t-btn-padding-xs: var(--t-spacing-04);
    --t-btn-font-size-lg: var(--t-font-size-md);
    --t-btn-font-size-md: var(--t-font-size-sm);
    --t-btn-font-size-sm: var(--t-font-size-xs);
    --t-btn-font-size-xs: var(--t-font-size-xs);
    --t-btn-font-weight-lg: var(--t-font-weight-lg);
    --t-btn-font-weight-md: var(--t-font-weight-lg);
    --t-btn-font-weight-sm: var(--t-font-weight-lg);
    --t-btn-font-weight-xs: var(--t-font-weight-md);
    --t-btn-radius: var(--t-radius-xs);
    --t-btn-gap: var(--t-spacing-03);
    /*    --t-btn-line-height-lg: var(--t-line-height-lg);
    --t-btn-line-height-md: var(--t-line-height-md);
    --t-btn-line-height-sm: var(--t-line-height-sm);
    --t-btn-line-height-xs: var(--t-line-height-xs);*/
    /* ----- Badge Control ----- */
    --t-bdg-height-lg: var(--t-spacing-12);
    --t-bdg-height-sm: var(--t-spacing-10);
    --t-bdg-padding-lg: var(--t-spacing-04);
    --t-bdg-padding-sm: var(--t-spacing-03);
    --t-bdg-font-size-lg: var(--t-font-size-sm);
    --t-bdg-font-size-sm: var(--t-font-size-xs);
    --t-bdg-font-weight-lg: var(--t-font-weight-lg);
    --t-bdg-font-weight-sm: var(--t-font-weight-lg);
    --t-bdg-radius-square: var(--t-radius-xs);
    --t-bdg-radius-round: var(--t-radius-pill);
    --t-bdg-line-height-lg: var(--t-line-height-lg);
    --t-bdg-line-height-sm: var(--t-line-height-sm);
    /* ----- Input Label Control ----- */
    --t-input-label-font-size: var(--t-font-size-sm);
    --t-input-label-font-weight: var(--t-font-weight-md);
    /* ----- Input Control ----- */
    --t-input-height-lg: var(--t-spacing-16);
    --t-input-height-md: var(--t-spacing-14);
    --t-input-height-sm: var(--t-spacing-12);
    --t-input-height-xs: var(--t-spacing-10);
    --t-input-font-weight-lg: var(--t-font-size-md);
    --t-input-font-weight-md: var(--t-font-size-md);
    --t-input-font-weight-sm: var(--t-font-size-md);
    --t-input-font-weight-xs: var(--t-font-size-md);
    --t-input-font-size-lg: var(--t-font-size-md);
    --t-input-font-size-md: var(--t-font-size-sm);
    --t-input-font-size-sm: var(--t-font-size-xs);
    --t-input-font-size-xs: var(--t-font-size-xs);
    --t-input-line-height-lg: var(--t-line-height-md);
    --t-input-line-height-md: var(--t-line-height-sm);
    --t-input-line-height-sm: var(--t-line-height-xs);
    --t-input-line-height-xs: var(--t-line-height-xs);
    --t-input-radius: var(--t-radius-xs);
    --t-input-padding: var(--t-spacing-03);
    --t-input-line-height: var(--t-input-height);
    /* Actual height = input height + border 2px */
    --t-input-line-height: var(--t-spacing-10);
    --t-input-font-size: var(--t-font-size-sm);
    --t-input-font-weight: var(--t-font-weight-md);
    /* ----- Infobox Control ----- */
    --t-infobox-padding: var(--t-spacing-08);
    --t-infobox-radius: var(--t-radius-xxs);
    --t-infobox-border-width: 1px;
    --t-infobox-font-size: var(--t-font-size-sm);
    --t-infobox-font-weight: var(--t-font-weight-sm);
    --t-infobox-line-height: var(--t-line-height-sm);
    --t-infobox-margin-bottom: var(--t-spacing-08);
    --t-infobox-line-height: 1.5;
    --t-infobox-title-font-size: var(--t-font-size-sm);
    --t-infobox-title-font-weight: var(--t-font-weight-md);
    /* ----- Form Controls Control ----- */
    --t-form-control-size: 16px;
    --t-form-control-border-width: 1px;
    --t-form-control-radius: var(--t-radius-xxs);
    /* ----- Text Box Control ----- */
    --t-textbox-height-lg: 120px;
    --t-textbox-height-md: 100px;
    --t-textbox-height-sm: 80px;
    --t-textbox-height-xs: 60px;
    --t-textbox-font-size-lg: var(--t-font-size-md);
    --t-textbox-font-size-md: var(--t-font-size-sm);
    --t-textbox-font-size-sm: var(--t-font-size-xs);
    --t-textbox-font-size-xs: var(--t-font-size-xs);
    --t-textbox-line-height-lg: var(--t-line-height-lg);
    --t-textbox-line-height-md: var(--t-line-height-md);
    --t-textbox-line-height-sm: var(--t-line-height-sm);
    --t-textbox-line-height-xs: var(--t-line-height-xs);
    --t-textbox-padding-lg: var(--t-spacing-07);
    --t-textbox-padding-md: var(--t-spacing-06);
    --t-textbox-padding-sm: var(--t-spacing-05);
    --t-textbox-padding-xs: var(--t-spacing-04);
    --t-textbox-radius: var(--t-radius-xxs);
    --t-textbox-font-weight-lg: var(--t-font-weight-md);
    --t-textbox-font-weight-md: var(--t-font-weight-md);
    --t-textbox-font-weight-sm: var(--t-font-weight-md);
    --t-textbox-font-weight-xs: var(--t-font-weight-md);
    --t-textbox-line-height-lg: 1.5;
    --t-textbox-line-height-md: 1.5;
    --t-textbox-line-height-sm: 1.4;
    --t-textbox-line-height-xs: 1.4;
    --t-textbox-padding-lg: var(--t-spacing-08);
    --t-textbox-padding-md: var(--t-spacing-06);
    --t-textbox-padding-sm: var(--t-spacing-05);
    --t-textbox-padding-xs: var(--t-spacing-04);
    /* ----- Callout Control ----- */
    --t-callout-padding: var(--t-spacing-08);
    --t-callout-accent-width: 4px;
    --t-callout-radius: var(--t-radius-xs);
    --t-callout-font-size: var(--t-font-size-sm);
    --t-callout-font-weight: var(--t-font-weight-sm);
    --t-callout-line-height: var(--t-line-height-sm);
    --t-callout-title-font-size: var(--t-font-size-sm);
    --t-callout-margin-bottom: var(--t-spacing-08);
    --t-callout-line-height: 1.5;
    --t-callout-title-font-weight: var(--t-font-weight-md);
    /*  =========  Pattern =========*/
    /*  ----- Navbar -----  */
    --t-navbar-width: 110px;
    /*   ----- Form card* -----*/
    --t-formcard-radius: var(--t-radius-sm);
    /* page title*/
    --t-page-header-height: 72px;
    --t-page-footer-height: 80px;
    --t-page-component-gap: 10px;
    /*Modal*/
    --t-modal-body-gap: 10px;
    --t-modal-header-height: 60px;
    --t-modal-footer-height: 60px;
    /*Private*/
    --t-grid-font-size: 13px;
}