:root {
    /* Typography */
    --demi-line-height: 1.5;
    --demi-font-family: "Figtree";

    /* Spacing & radius */
    --demi-border-radius-sm: 4px;
    --demi-border-radius-md: 8px;
    --demi-border-radius-lg: 12px;
    --demi-border-radius-xl: 16px;

    /* Brand (RGB) */
    --demi-primary-color: 37, 99, 235; /* #2563eb */
    --demi-secondary-color: 245 180 2; /* #f5b402 */

    /* Neutrals (RGB) */
    --demi-white: 255, 255, 255;
    --demi-primary-font-color: 99, 99, 99; /* #636363 */
    --demi-secondary-font-color: 80, 87, 94; /* #50575e */
    --demi-text-heading: 29, 35, 39; /* #1d2327 */
    --demi-text-muted: 100, 105, 112; /* #646970 */
    --demi-text-muted-light: 148, 163, 184; /* #94a3b8 */
    --demi-light-grey-color: 247, 247, 247; /* #F7F7F7 */
    --demi-grey-color: 165, 165, 165; /* #a5a5a5 */
    --demi-dark-grey-color: 207, 207, 207; /* #CFCFCF */
    --demi-border-light-color: 226, 228, 231; /* #e2e4e7 */
    --demi-border-color: 195, 196, 199; /* #c3c4c7 */
    --demi-bg-subtle: 248, 250, 252; /* #f8fafc */
    --demi-bg-panel: 246, 247, 247; /* #f6f7f7 */
    --demi-dark-color: 43, 43, 43; /* #2B2B2B */

    /* Semantic (RGB) */
    --demi-success-color: 0, 163, 42; /* #00a32a */
    --demi-success-light-color: 237, 248, 238; /* #edf8ee */
    --demi-danger-color: 179, 45, 46; /* #b32d2e */
    --demi-danger-light-color: 254, 242, 242; /* #FEF2F2 */
    --demi-light-warning-color: 255, 248, 229; /* #fff8e5 */
    --demi-warning-color: 219, 166, 23; /* #dba617 */
    --demi-info-color: 0, 115, 170; /* #0073aa */
    --demi-info-light-color: 240, 246, 252; /* #f0f6fc */
}