:root{

    /* ---------- Brand / Primary ---------- */

    --success: #4caf50;
    --warning: #ffc107;
    --danger: #f44336;
    --info: #03a9f4;

    /* ---------- Accent Colors ---------- */

    --accent-success: #22c55e;
    --accent-warning: #facc15;
    --accent-danger: #ef4444;
    --accent-info: #3b82f6;

    /* ---------- Neutral Colors ---------- */

    --light: #ffffff;
    --dark: #000000;
    --gray-100: #f5f5f5;
    --gray-200: #eeeeee;
    --gray-300: #e0e0e0;
    --gray-400: #bdbdbd;
    --gray-500: #9e9e9e;
    --gray-600: #757575;
    --gray-700: #616161;
    --gray-800: #424242;
    --gray-900: #212121;

    /* ---------- Borders ---------- */

    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;

    /* ---------- Text Colors ---------- */

    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-600);
    --text-light: var(--gray-100);
    --text-dark: var(--gray-900);

    /* ---------- Shadows ---------- */

    --shadow-sm: 0 1px 3px rgba(0,0,0,.05);
    --shadow-md: 0 2px 8px rgba(0,0,0,.08);
    --shadow-lg: 0 6px 20px rgba(0,0,0,.12);

    /* ---------- Spacing ---------- */

    --space-xs: .25rem;
    --space-sm: .5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* ---------- Transitions ---------- */

    --transition-fast: .15s ease;
    --transition-base: .2s ease;

    /* ---------- Column ---------- */

    --col-1: 8.33%;
    --col-2: 16.66%;
    --col-3: 25%;
    --col-4: 33.33%;
    --col-5: 41.66%;
    --col-6: 50%;
    --col-7: 58.33%;
    --col-8: 66.66%;
    --col-9: 75%;
    --col-10: 83.33%;    
    --col-11: 91.66%;
    --col-12: 100%;

    /* ---------- Font Sizes ---------- */

    --text-xs: 0.75rem;   /* 12px */
    --text-sm: 0.875rem;  /* 14px */
    --text-md: 1rem;      /* 16px (base) */
    --text-lg: 1.125rem;  /* 18px */
    --text-xl: 1.25rem;   /* 20px */
    --text-2xl: 1.5rem;   /* 24px */
    --text-3xl: 1.875rem; /* 30px */
    --text-4xl: 2.25rem;  /* 36px */
    --text-5xl: 3rem;  /* 48px */

    /* ---------- Line Heights ---------- */

    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* ---------- Font Weight ---------- */

    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* ---------- Text Transform ---------- */

    --text-uppercase: uppercase;
    --text-lowercase: lowercase;
    --text-capitalize: capitalize;
    --text-normalcase: none;

    /* ---------- Text Alignment ---------- */
    
    --text-left: left;
    --text-center: center;
    --text-right: right;
    --text-justify: justify;

    /* ---------- Text Decoration ---------- */

    --text-underline: underline;
    --text-line-through: line-through;
    --text-none: none;

    /* ---------- Display ---------- */

    --display-none: none;
    --display-block: block;
    --display-inline: inline;
    --display-inline-block: inline-block;
    --display-flex: flex;
    --display-inline-flex: inline-flex;
    --display-grid: grid;
    --display-inline-grid: inline-grid;
    --display-table: table;
    --display-table-row: table-row;
    --display-table-cell: table-cell;

    /* ---------- Flex Direction ---------- */

    --flex-row: row;
    --flex-row-reverse: row-reverse;
    --flex-column: column;
    --flex-column-reverse: column-reverse;

    /* ---------- Flex Wrap ---------- */

    --flex-nowrap: nowrap;
    --flex-wrap: wrap;
    --flex-wrap-reverse: wrap-reverse;

    /* ---------- Justify Content ---------- */

    --justify-start: flex-start;
    --justify-end: flex-end;
    --justify-center: center;
    --justify-between: space-between;
    --justify-around: space-around;
    --justify-evenly: space-evenly;

    /* ---------- Align Items ---------- */

    --align-start: flex-start;
    --align-end: flex-end;
    --align-center: center;
    --align-baseline: baseline;
    --align-stretch: stretch;

    /* ---------- Align Self ---------- */

    --self-auto: auto;
    --self-start: flex-start;
    --self-end: flex-end;
    --self-center: center;
    --self-stretch: stretch;

    /* ---------- Flex Grow / Shrink / Basis ---------- */
    
    --flex-grow-0: 0;
    --flex-grow-1: 1;
    --flex-shrink-0: 0;
    --flex-shrink-1: 1;
    --flex-basis-auto: auto;
    --flex-basis-0: 0%;
    --flex-basis-25: 25%;
    --flex-basis-50: 50%;
    --flex-basis-75: 75%;
    --flex-basis-100: 100%;

    /* -------- Breakpoints -------- */

    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;

}