:root {
    /* === TYPOGRAPHY === */

    /* == Font Families == */
    --font-display: 'Geist Variable';
    --font-body: 'Iosevka Aile';
    --font-mono: 'Iosevka';

    /* == Font Sizes == */
    --typo-size-base: 16px;
    --typo-size-6xl: 4em;        /* 64px */
    --typo-size-5xl: 3.1875em;   /* 51px */
    --typo-size-4xl: 2.5em;      /* 40px */
    --typo-size-3xl: 2em;        /* 32px */
    --typo-size-2xl: 1.5625em;   /* 25px */
    --typo-size-xl: 1.25em;      /* 20px */
    --typo-size-lg: 1.125em;     /* 18px */
    --typo-size-md: 1em;         /* 16px */
    --typo-size-sm: 0.875em;     /* 14px */
    --typo-size-xs: 0.8125em;    /* 13px */
    --typo-size-2xs: 0.625em;    /* 10px */

    /* == Line Height == */
    --typo-leading-compressed: 1.0;     /* 1.0 - very tight */
    --typo-leading-tight: 1.125;        /* 1.125 - tight */
    --typo-leading-snug: 1.25;          /* 1.25 - snug */
    --typo-leading-cozy: 1.375;         /* 1.375 - cozy */
    --typo-leading-normal: 1.5;         /* 1.5 - normal */
    --typo-leading-relaxed: 1.625;      /* 1.625 - relaxed */
    --typo-leading-comfortable: 1.75;   /* 1.75 - comfortable */
    --typo-leading-loose: 1.875;        /* 1.875 - loose */
    --typo-leading-spacious: 2.0;       /* 2.0 - very loose */

    /* == Letter Spacing == */
    --typo-spacing-tightest: -0.05em;   /* -0.05em - very tight */
    --typo-spacing-tighter: -0.025em;   /* -0.025em - tight */
    --typo-spacing-tight: -0.0125em;    /* -0.0125em - slightly tight */
    --typo-spacing-normal: 0em;         /* 0 - normal */
    --typo-spacing-relaxed: 0.025em;    /* 0.025em - slightly loose */
    --typo-spacing-comfortable: 0.05em; /* 0.05em - comfortable */
    --typo-spacing-loose: 0.1em;        /* 0.1em - loose */
    --typo-spacing-looser: 0.15em;      /* 0.15em - very loose */
    --typo-spacing-loosest: 0.2em;      /* 0.2em - extremely loose */

    /* == Font Weight == */
    --typo-weight-thin: 100;
    --typo-weight-extralight: 200;
    --typo-weight-light: 300;
    --typo-weight-regular: 400;
    --typo-weight-medium: 500;
    --typo-weight-semibold: 600;
    --typo-weight-bold: 700;
    --typo-weight-extrabold: 800;
    --typo-weight-black: 900;

    /* === SPACING === */

    /* == Base Size Units == */
    --size-0: 0;
    --size-px: 1px;
    --size-05: 0.125rem;   /* 2px */
    --size-1: 0.25rem;      /* 4px */
    --size-2: 0.5rem;       /* 8px */
    --size-3: 0.75rem;      /* 12px */
    --size-4: 1rem;         /* 16px */
    --size-5: 1.25rem;      /* 20px */
    --size-6: 1.5rem;       /* 24px */
    --size-8: 2rem;         /* 32px */
    --size-10: 2.5rem;      /* 40px */
    --size-12: 3rem;        /* 48px */
    --size-16: 4rem;        /* 64px */
    --size-20: 5rem;        /* 80px */
    --size-24: 6rem;        /* 96px */
    --size-32: 8rem;        /* 128px */
    --size-40: 10rem;       /* 160px */
    --size-48: 12rem;       /* 192px */
    --size-64: 16rem;       /* 256px */
    --size-80: 20rem;       /* 320px */
    --size-96: 24rem;       /* 384px */
    --size-128: 32rem;      /* 512px */
    --size-160: 40rem;      /* 640px */
    --size-192: 48rem;      /* 768px */
    --size-256: 64rem;      /* 1024px */
    --size-320: 80rem;      /* 1280px */
    --size-384: 96rem;      /* 1536px */
    --size-360: 90rem;      /* 1440px */
    --size-400: 100rem;     /* 1600px */
    --size-480: 120rem;     /* 1920px */

    /* == Semantic Spacing == */
    --spacing-none: var(--size-0);
    --spacing-hairline: var(--size-px);
    --spacing-tight: var(--size-1);
    --spacing-snug: var(--size-2);
    --spacing-cozy: var(--size-4);
    --spacing-comfortable: var(--size-6);
    --spacing-relaxed: var(--size-8);
    --spacing-spacious: var(--size-12);
    --spacing-generous: var(--size-16);
    --spacing-luxurious: var(--size-24);
    --spacing-expansive: var(--size-32);

    /* === LIST STYLING === */

    /* == List Indentation Levels == */
    --element-list-indent-l1: var(--spacing-cozy);
    --element-list-indent-l2: var(--spacing-cozy);
    --element-list-indent-l3: var(--spacing-cozy);
    --element-list-indent-l4: var(--spacing-cozy);

    /* == Unordered List Symbols == */
    --element-ul-symbol-l1: '⯃';
    --element-ul-symbol-l2: '⯁';
    --element-ul-symbol-l3: '⯆';
    --element-ul-symbol-l4: '⯀';

    /* == Ordered List Styling == */
    --element-ol-prefix-l1: '';
    --element-ol-style-l1: decimal;
    --element-ol-suffix-l1: '.)';
    --element-ol-prefix-l2: '';
    --element-ol-style-l2: lower-alpha;
    --element-ol-suffix-l2: '.)';
    --element-ol-prefix-l3: '';
    --element-ol-style-l3: decimal-leading-zero;
    --element-ol-suffix-l3: '';
    --element-ol-prefix-l4: '';
    --element-ol-style-l4: lower-greek;
    --element-ol-suffix-l4: '.)';

    /* === COLORS === */

    /* == Default Palette == */

    /* Blacks, Grays & Off-Whites */
    --color-palette-woodsmoke: oklch(15.5% 0.009 274.276deg);       /* Woodsmoke: #0B0C10 */
    --color-palette-black-ink: oklch(21.9% 0.006 285.911deg);       /* Shark: #1A1A1D */
    --color-palette-charcoal: oklch(26.6% 0.008 240.166deg);        /* Shark2: #222629 */
    --color-palette-charcoal-gray: oklch(33.7% 0.026 266.801deg);   /* Bright Gray: #313745 */
    --color-palette-slate-gray: oklch(33.3% 0 89.876deg);           /* Mineshaft: #363636 */
    --color-palette-gunmetal: oklch(41.1% 0.008 248.035deg);        /* Abbey2: #474B4F */
    --color-palette-carbon: oklch(39.8% 0 89.876deg);               /* Tundora: #474747 */
    --color-palette-steel-gray: oklch(42.5% 0.003 286.26deg);       /* Abbey: #4e4e50 */
    --color-palette-dusty-black: oklch(43.7% 0.013 17.672deg);      /* DonJuan: #594F4F */
    --color-palette-stone: oklch(64.3% 0.005 91.471deg);            /* Natural Gray: #8E8D8A */
    --color-palette-cloud-gray: oklch(53.6% 0.005 236.565deg);      /* Nevada: #6B6E70 */
    --color-palette-silver: oklch(72.9% 0.001 17.185deg);           /* Silver Chalice: #A8A7A7 */
    --color-palette-light-silver: oklch(82.6% 0.002 247.844deg);    /* Silversand: #C5C6C7 */
    --color-palette-pale-gray: oklch(91.3% 0.004 91.449deg);        /* Westar: #E3E2DF */
    --color-palette-pale-stone: oklch(89.7% 0.004 106.481deg);      /* Quillgray: #DDDDDA */
    --color-palette-very-pale-gray: oklch(94.3% 0 89.876deg);       /* Gallery: #ECECEC */
    --color-palette-off-white: oklch(98.1% 0.003 247.858deg);       /* Catskill White: #F7F9fB */
    --color-palette-cat-squeeze: oklch(98.3% 0.004 236.496deg);     /* Cat Squeeze: #F7FAFC */
    --color-palette-smoky-mauve: oklch(50% 0.054 308.622deg);       /* Smoky: #6C5B7B */

    /* Reds */
    --color-palette-oxblood: oklch(30.5% 0.122 12.109deg);          /* Bordeaux: #5D001E */
    --color-palette-deep-maroon: oklch(37.6% 0.109 11.682deg);      /* Crown of Thorns: #6F2232 */
    --color-palette-crimson: oklch(43.2% 0.169 7.14deg);            /* Monarch: #950740 */
    --color-palette-cherry-red: oklch(45.4% 0.168 1.454deg);        /* Disco: #9A1750 */
    --color-palette-ruby: oklch(52.1% 0.206 15.782deg);             /* Shiraz: #C3073F */
    --color-palette-red-clay: oklch(65.1% 0.178 27.507deg);         /* Burnt Sienna: #E85A4F */
    --color-palette-lava: oklch(63.6% 0.193 17.075deg);             /* Mandy: #E84A5F */
    --color-palette-vivid-scarlet: oklch(66.6% 0.221 15.669deg);    /* Radical Red: #FE4365 */

    /* Pinks & Magentas */
    --color-palette-heliotrope: oklch(68.3% 0.217 353.666deg);      /* Heliotrope: #F74FA3 */
    --color-palette-hot-pink: oklch(65.4% 0.2 6.69deg);             /* French Rose: #EE4C7C */
    --color-palette-cerise: oklch(60.7% 0.23 18.554deg);            /* Amaranth: #EC2049 */
    --color-palette-fuchsia: oklch(49.6% 0.181 351.176deg);         /* Hibiscus: #A7226E */
    --color-palette-dusty-rose: oklch(63.2% 0.11 2.384deg);         /* Turkish Rose: #C06C84 */
    --color-palette-berry: oklch(60.8% 0.159 2.621deg);             /* Mulberry: #CC527A */
    --color-palette-petal-pink: oklch(80.5% 0.063 1.992deg);        /* Rose Fog: #E3AFBC */
    --color-palette-coral-pink: oklch(71.2% 0.162 15.607deg);       /* Froly: #F67280 */
    --color-palette-sweet-pink: oklch(79.2% 0.114 21.911deg);       /* Sweet Pink: #FC9D9A */

    /* Oranges & Browns */
    --color-palette-persimmon: oklch(68.6% 0.179 40.01deg);         /* Flamingo: #F26B38 */
    --color-palette-terracotta: oklch(71.3% 0.131 27.646deg);       /* Apricot: #E98074 */
    --color-palette-tan: oklch(82.7% 0.047 76.752deg);              /* Akaroa: #D8C3A5  */
    --color-palette-peach: oklch(88.5% 0.072 57.746deg);            /* Flesh: #FECEAB */
    --color-palette-pastel-orange: oklch(82.1% 0.092 42.408deg);    /* Rosebud: #F8B195 */
    --color-palette-light-apricot: oklch(87.8% 0.066 57.778deg);    /* Vivid Tangerine: #F9CDAD */
    --color-palette-bone-white: oklch(92.7% 0.015 94.206deg);       /* Satin Linen: #EAE7DC */

    /* Yellows */
    --color-palette-ripe-lemon: oklch(83.9% 0.167 91.469deg);       /* Ripe Lemon: #F2C51D */
    --color-palette-bright-canary: oklch(89% 0.157 97.726deg);      /* Energy Yellow: #F7DB4F */
    --color-palette-pale-lemon: oklch(95.6% 0.104 121.573deg);      /* Mimosa: #E5FCAD */

    /* Greens */
    --color-palette-forest-green: oklch(58.1% 0.127 130.001deg);    /* Crete: #61892F */
    --color-palette-lime-green: oklch(74.6% 0.18 129.939deg);       /* Atlantis: #86C232 */
    --color-palette-electric-green: oklch(87.7% 0.227 137.099deg);  /* Screaming Green: #87f74f */
    --color-palette-sage: oklch(75.1% 0.056 144.175deg);            /* Norway: #87f74f */
    --color-palette-mint-green: oklch(84.8% 0.098 151.333deg);      /* Chinook: #9de0ad */
    --color-palette-olive-drab: oklch(82.5% 0.042 107.285deg);      /* Olive Drap: #C8C8A9 */
    --color-palette-seafoam: oklch(71.6% 0.056 165.214deg);         /* Acapulco: #83AF9B */

    /* Blues & Teals */
    --color-palette-dark-navy: oklch(27.3% 0.024 253.693deg);       /* Ebony Clay: #1F2833 */
    --color-palette-deep-teal: oklch(32.4% 0.018 225.132deg);       /* Outer Space: #2A363B */
    --color-palette-royal-blue: oklch(46.1% 0.07 245.64deg);        /* Ming: #355C7D */
    --color-palette-sky-blue: oklch(76.3% 0.129 233.891deg);        /* Picton Blue: #4FBFF7 */
    --color-palette-slate-blue: oklch(55.1% 0.043 210.602deg);      /* Cutty Sark: #547980 */
    --color-palette-turquoise: oklch(61.5% 0.091 198.865deg);       /* Lochinvar: #2F9599 */
    --color-palette-aqua: oklch(68.6% 0.095 190.758deg);            /* Keppel: #45ADA8 */
    --color-palette-electric-blue: oklch(90.8% 0.128 188.419deg);   /* Aquamarine: #66FCF1 */
    --color-palette-powder-blue: oklch(88.2% 0.062 187.276deg);     /* Powder Blue: #a9e6df */
    --color-palette-ice-blue: oklch(99.9% 0.001 197.139deg);        /* Twilight Blue: #feffff */

    /* == Semantic Colors == */

    /* Primary Colors */
    --color-primary: var(--color-palette-lava);
    --color-primary-surface: var(--color-palette-sweet-pink);
    --color-primary-emphasis: var(--color-palette-cherry-red);

    /* Secondary Colors */
    --color-secondary: var(--color-palette-seafoam);
    --color-secondary-surface: var(--color-palette-olive-drab);
    --color-secondary-emphasis: var(--color-palette-mint-green);

    /* Tertiary Colors */
    --color-tertiary: var(--color-palette-bright-canary);
    --color-tertiary-surface: var(--color-palette-pale-lemon);
    --color-tertiary-emphasis: var(--color-palette-ripe-lemon);

    /* Quartenary Colors */
    --color-quarternary: var(--color-palette-powder-blue);
    --color-quarternary-surface: var(--color-palette-aqua);
    --color-quarternary-emphasis: var(--color-palette-slate-blue);

    /* Text Base Colors */
    --color-text-primary: var(--color-palette-black-ink);           /* Main Body Texts, headlines */
    --color-text-secondary: var(--color-palette-charcoal);          /* Subheading, Secondary Info */
    --color-text-tertiary: var(--color-palette-charcoal-gray);       /* Captions, Meta Text */
    --color-text-quarternary: var(--color-palette-carbon);          /* Placeholder Text */
    --color-text-inverse: var(--color-palette-ice-blue);            /* Text on dark backgrounds */
    --color-text-disabled: var(--color-palette-cloud-gray);         /* Disabled form labels, inactive text */

    /* Surface Base Colors */
    --color-surface-base: var(--color-palette-ice-blue);            /* Main page background */
    --color-surface-elevated-1: var(--color-palette-off-white);     /* Cards, Panels */
    --color-surface-elevated-2: var(--color-palette-very-pale-gray);    /* Modals, Dropdowns */
    --color-surface-elevated-3: var(--color-palette-pale-gray);     /* Tooltips, popovers */
    --color-surface-elevated-4: var(--color-palette-light-silver);  /* Highest Elevation */
    --color-surface-inverse: var(--color-palette-black-ink);        /* Darkest Surface for Contrast */

    /* Border Base Colors */
    --color-border-subtle: var(--color-palette-silver);             /* Subtle Dividers, Card Borders */
    --color-border-normal: var(--color-palette-stone);              /* Standard Borders, form fields */
    --color-border-strong: var(--color-palette-charcoal-gray);      /* Emphasized Borders */

    /* State Colors */
    --color-state-error: var(--color-palette-cerise);               /* Error Text, Container, icons */
    --color-state-warning: var(--color-palette-persimmon);          /* Warning Text, Container, Icons */
    --color-state-success: var(--color-palette-lime-green);         /* Success Text, Container, Icons */
    --color-state-info: var(--color-palette-royal-blue);            /* Info Text, Container, Icons */

    /* Link Colors */
    --color-text-link: var(--color-text-tertiary);
    --color-text-link-hover: var(--color-secondary);
    --color-text-link-visited: var(--color-palette-fuchsia);

    /* Focus States */
    --color-focus-ring: var(--color-primary);
    --color-focus-ring-offset: var(--color-primary);
    --color-focus-indicator: var(--color-primary-emphasis)

    /* Overlays */;
    --color-utility-overlay-light: oklch(0% 0 0deg / 10%);       /* Light overlays */
    --color-utility-overlay-medium: oklch(0% 0 0deg / 30%);      /* Medium overlays */
    --color-utility-overlay-heavy: oklch(0% 0 0deg / 60%);       /* Heavy overlays, modal backdrops */
    --color-surface-overlay: var(--color-utility-overlay-medium); /* Modal overlays, backdrop */
    --color-surface-backdrop: var(--color-utility-overlay-heavy); /* Full screen overlays */

    /* Loading/Skeleton */
    --color-utility-skeleton-base: var(--color-surface-elevated-2);    /* Skeleton loader base */
    --color-utility-skeleton-shimmer: var(--color-surface-elevated-1); /* Skeleton shimmer effect */

    /* Dividers */
    --color-utility-divider: var(--color-border-subtle);         /* Section dividers, HR elements */
    --color-utility-divider-strong: var(--color-border-normal);  /* Emphasized dividers */

    /* Shadows */
    --color-utility-shadow: oklch(0% 0 0deg / 10%);              /* Drop shadows */
    --color-utility-shadow-strong: oklch(0% 0 0deg / 25%);      /* Strong shadows */

    /* Highlights */
    --color-utility-highlight: var(--color-tertiary-surface); /* Text highlighting, search results */
    --color-utility-highlight-strong: var(--color-tertiary); /* Strong highlighting */
}