/* =================
   Design Tokens
   ================= */

   :root {
    /* ================= */
    /* Primitive Colors */
    /* ================= */
    /* Light Primitive */
    /* ================= */

    /* Gray Scale */
    --color-light-gray-50: #ffffff;
    --color-light-gray-100: #f6f7f8;
    --color-light-gray-200: #e1e3e6;
    --color-light-gray-300: #d5d5d5;
    --color-light-gray-400: #aaadb1;
    --color-light-gray-500: #909090;
    --color-light-gray-600: #66696d;
    --color-light-gray-700: #414346;
    --color-light-gray-800: #1f2122;
    --color-light-gray-900: #000000;

    /* Blue Scale */
    --color-light-blue-100: #e0f2ff;
    --color-light-blue-200: #cae8ff;
    --color-light-blue-300: #b5deff;
    --color-light-blue-400: #96cefd;
    --color-light-blue-500: #78bbfa;
    --color-light-blue-600: #59a7f6;
    --color-light-blue-700: #3892f3;
    --color-light-blue-800: #147af3;
    --color-light-blue-900: #0265dc;
    --color-light-blue-1000: #0054b6;
    --color-light-blue-1100: #004491;

    /* Purple Scale */
    --color-light-purple-100: #edeeff;
    --color-light-purple-200: #e0e2ff;
    --color-light-purple-300: #d3d5ff;
    --color-light-purple-400: #c1c4ff;
    --color-light-purple-500: #acafff;
    --color-light-purple-600: #9599ff;
    --color-light-purple-700: #7e84fc;
    --color-light-purple-800: #686df4;
    --color-light-purple-900: #5258e4;
    --color-light-purple-1000: #4046ca;
    --color-light-purple-1100: #3236a8;

    /* Green Scale */
    --color-light-green-100: #cef8e0;
    --color-light-green-200: #adf4ce;
    --color-light-green-300: #89ecbc;
    --color-light-green-400: #67dea8;
    --color-light-green-500: #49cc93;
    --color-light-green-600: #2fb880;
    --color-light-green-700: #15a46e;
    --color-light-green-800: #008f5d;
    --color-light-green-900: #007a4d;
    --color-light-green-1000: #00653e;
    --color-light-green-1100: #005132;

    /* Orange Scale */
    --color-light-orange-100: #ffeccc;
    --color-light-orange-200: #ffdfad;
    --color-light-orange-300: #fdd291;
    --color-light-orange-400: #ffbb63;
    --color-light-orange-500: #ffa037;
    --color-light-orange-600: #f68511;
    --color-light-orange-700: #e46f00;
    --color-light-orange-800: #cb5d00;
    --color-light-orange-900: #b14c00;
    --color-light-orange-1000: #953d00;
    --color-light-orange-1100: #7a2f00;

    /* Red Scale */
    --color-light-red-100: #ffebe7;
    --color-light-red-200: #ffddd6;
    --color-light-red-300: #ffcdc3;
    --color-light-red-400: #ffb7a9;
    --color-light-red-500: #ff9b88;
    --color-light-red-600: #ff7c65;
    --color-light-red-700: #f75c46;
    --color-light-red-800: #ea3829;
    --color-light-red-900: #d31510;
    --color-light-red-1000: #b40000;
    --color-light-red-1100: #930000;

    /* Neutral Scale */
    --color-light-neutral-10: rgba(50, 54, 168, 0);
    --color-light-neutral-100: rgba(50, 54, 168, 0.06);
    --color-light-neutral-200: rgba(50, 54, 168, 0.12);
    --color-light-neutral-bold-10: rgba(0, 0, 0, 0);
    --color-light-neutral-bold-100: rgba(0, 0, 0, 0.06);
    --color-light-neutral-bold-200: rgba(0, 0, 0, 0.12);

    
    /*Dark Primitive*/
    /* Gray Scale */
    --color-dark-gray-50: #1d1d1d;
    --color-dark-gray-75: #262626;
    --color-dark-gray-100: #323232;
    --color-dark-gray-200: #3f3f3f;
    --color-dark-gray-300: #545454;
    --color-dark-gray-400: #707070;
    --color-dark-gray-500: #909090;
    --color-dark-gray-600: #b2b2b2;
    --color-dark-gray-700: #d1d1d1;
    --color-dark-gray-800: #ebebeb;
    --color-dark-gray-900: #ffffff;

    /* Blue Scale */
    --color-dark-blue-100: #003877;
    --color-dark-blue-200: #00418a;
    --color-dark-blue-300: #004da3;
    --color-dark-blue-400: #0059c2;
    --color-dark-blue-500: #0367e0;
    --color-dark-blue-600: #1379f3;
    --color-dark-blue-700: #348ff4;
    --color-dark-blue-800: #54a3f6;
    --color-dark-blue-900: #72b7f9;
    --color-dark-blue-1000: #8fcafc;
    --color-dark-blue-1100: #aedbfe;

    /* Purple Scale */
    --color-dark-purple-100: #282c8c;
    --color-dark-purple-200: #2f34a3;
    --color-dark-purple-300: #393fbb;
    --color-dark-purple-400: #464bd3;
    --color-dark-purple-500: #555be7;
    --color-dark-purple-600: #686df4;
    --color-dark-purple-700: #7c81fb;
    --color-dark-purple-800: #9195ff;
    --color-dark-purple-900: #a7aaff;
    --color-dark-purple-1000: #bcbeff;
    --color-dark-purple-1100: #d0d2ff;

    /* Green Scale */
    --color-dark-green-100: #044329;
    --color-dark-green-200: #004e2f;
    --color-dark-green-300: #005c38;
    --color-dark-green-400: #006c43;
    --color-dark-green-500: #007d4e;
    --color-dark-green-600: #008f5d;
    --color-dark-green-700: #12a26c;
    --color-dark-green-800: #2bb47d;
    --color-dark-green-900: #43c78f;
    --color-dark-green-1000: #5ed9a2;
    --color-dark-green-1100: #81e9b8;

    /* Red Scale */
    --color-dark-red-100: #7b0000;
    --color-dark-red-200: #8d0000;
    --color-dark-red-300: #a50000;
    --color-dark-red-400: #be0403;
    --color-dark-red-500: #d71913;
    --color-dark-red-600: #ea3829;
    --color-dark-red-700: #f65843;
    --color-dark-red-800: #ff755e;
    --color-dark-red-900: #ff9581;
    --color-dark-red-1000: #ffb0a1;
    --color-dark-red-1100: #ffc9bd;

    /* Orange Scale */
    --color-dark-orange-100: #662500;
    --color-dark-orange-200: #752d00;
    --color-dark-orange-300: #893700;
    --color-dark-orange-400: #9e4200;
    --color-dark-orange-500: #b44e00;
    --color-dark-orange-600: #ca5d00;
    --color-dark-orange-700: #e16d00;
    --color-dark-orange-800: #f4810c;
    --color-dark-orange-900: #fe9a2e;
    --color-dark-orange-1000: #ffb558;
    --color-dark-orange-1100: #fdce88;

    /* Neutral Scale */
    --color-dark-neutral-10: rgba(255, 255, 255, 0);
    --color-dark-neutral-100: rgba(255, 255, 255, 0.06);
    --color-dark-neutral-200: rgba(255, 255, 255, 0.12);


    /* Neutral Scale */
    --color-light-neutral-10: rgba(50, 54, 168, 0);
    --color-light-neutral-100: rgba(50, 54, 168, 0.06);
    --color-light-neutral-200: rgba(50, 54, 168, 0.12);
    --color-light-neutral-bold-10: rgba(0, 0, 0, 0);
    --color-light-neutral-bold-100: rgba(0, 0, 0, 0.06);
    --color-light-neutral-bold-200: rgba(0, 0, 0, 0.12);

    /* White Scale */
    --color-white-100: rgba(255, 255, 255, 0.05);
    --color-white-200: rgba(255, 255, 255, 0.10);
    --color-white-300: rgba(255, 255, 255, 0.20);
    --color-white-400: rgba(255, 255, 255, 0.40);
    --color-white-500: rgba(255, 255, 255, 0.70);
    --color-white-600: rgba(255, 255, 255, 0.80);
    --color-white-700: rgba(255, 255, 255, 0.85);
    --color-white-800: rgba(255, 255, 255, 0.90);
    --color-white-900: rgba(255, 255, 255, 0.95);
    --color-white-1000: #ffffff;

    /* Black Scale */
    --color-black-100: rgba(12, 12, 13, 0.05);
    --color-black-200: rgba(12, 12, 13, 0.10);
    --color-black-300: rgba(12, 12, 13, 0.20);
    --color-black-400: rgba(12, 12, 13, 0.40);
    --color-black-500: rgba(12, 12, 13, 0.70);
    --color-black-600: rgba(12, 12, 13, 0.80);
    --color-black-700: rgba(12, 12, 13, 0.85);
    --color-black-800: rgba(12, 12, 13, 0.90);
    --color-black-900: rgba(12, 12, 13, 0.95);
    --color-black-1000: #0c0c0d;

    /* ================= */
    /* Semantic Colors - Light Theme */
    /* ================= */

    /* Text Colors */
    --text-default: var(--color-black-800);
    --text-secondary: var(--color-black-600);
    --text-tertiary: var(--color-black-500);
    --text-label: var(--color-black-300);
    --text-disabled: var(--color-black-400);
    
    /* Text Inverse */
    --text-inverse: var(--color-light-gray-50);
    --text-inverse-subtle: var(--color-light-gray-400);

    /* Text Brand */
    --text-brand-bold: var(--color-light-purple-900);
    --text-brand-bold-hover: var(--color-light-purple-1000);
    --text-brand-bold-active: var(--color-light-purple-1100);

    /* Text Link */
    --text-link: var(--color-light-purple-900);
    --text-link-hover: var(--color-light-purple-1000);
    --text-link-active: var(--color-light-purple-1100);

    /* Text Status Colors */
    --text-brand: var(--color-light-purple-900);
    --text-success: var(--color-light-green-900);
    --text-danger: var(--color-light-red-900);
    --text-warning: var(--color-light-orange-900);
    --text-info: var(--color-light-blue-900);

    /* Text Accent Colors */
    --text-accent-purple: var(--color-light-purple-600);
    --text-accent-green: var(--color-light-green-600);
    --text-accent-orange: var(--color-light-orange-600);
    --text-accent-red: var(--color-light-red-600);

    /* Background Colors */
    --bg-surface-default: var(--color-light-gray-50);
    --bg-surface-raised: var(--color-light-gray-50);
    --bg-surface-overlay: var(--color-light-gray-50);
    --bg-surface-sunken: var(--color-light-gray-100);
    --bg-surface-bold: var(--color-light-gray-800);

    /* Background Neutral Colors */
    --bg-neutral: var(--color-light-neutral-10);
    --bg-neutral-hover: var(--color-light-neutral-100);
    --bg-neutral-active: var(--color-light-neutral-200);
    --bg-neutral-selected: var(--color-light-neutral-100);
    --bg-neutral-disabled: var(--color-light-neutral-200);

    /* Background Bold Neutral */
    --bg-bold-neutral: var(--color-light-neutral-bold-10);
    --bg-bold-neutral-hover: var(--color-light-neutral-bold-100);
    --bg-bold-neutral-active: var(--color-light-neutral-bold-200);
    --bg-bold-neutral-selected: var(--color-light-neutral-bold-100);
    --bg-bold-neutral-disabled: var(--color-black-100);

    /* Background Gray */
    --bg-gray-subtler: var(--color-light-gray-100);
    --bg-gray-subtler-hover: var(--color-light-gray-200);
    --bg-gray-subtler-active: var(--color-light-gray-300);
    --bg-gray-subtle: var(--color-light-gray-200);
    --bg-gray-subtle-hover: var(--color-light-gray-400);
    --bg-gray-subtle-active: var(--color-light-gray-400);
    --bg-gray-bold: var(--color-light-gray-800);
    --bg-gray-bold-hover: var(--color-light-gray-700);
    --bg-gray-bold-active: var(--color-light-gray-600);


    /* Background Input */
    --bg-input-default: var(--color-light-gray-50);
    --bg-input-hover: var(--color-light-gray-100);

    /* Background Brand */
    --bg-brand: var(--color-light-purple-900);
    --bg-brand-hover: var(--color-light-purple-1000);
    --bg-brand-active: var(--color-light-purple-1100);
    --bg-brand-subtle: var(--color-light-purple-100);

    /* Background Status */
    --bg-danger: var(--color-light-red-900);
    --bg-danger-hover: var(--color-light-red-1000);
    --bg-danger-active: var(--color-light-red-1100);
    --bg-danger-subtle: var(--color-light-red-100);

    --bg-success: var(--color-light-green-900);
    --bg-success-hover: var(--color-light-green-1000);
    --bg-success-active: var(--color-light-green-1100);
    --bg-success-subtle: var(--color-light-green-100);

    --bg-warning: var(--color-light-orange-900);
    --bg-warning-hover: var(--color-light-orange-1000);
    --bg-warning-active: var(--color-light-orange-1100);
    --bg-warning-subtle: var(--color-light-orange-100);

    /* Background Accent */
    --bg-accent-blue: var(--color-light-purple-900);
    --bg-accent-blue-subtle: var(--color-light-blue-100);
    --bg-accent-purple: var(--color-light-purple-600);
    --bg-accent-purple-subtle: var(--color-light-purple-100);
    --bg-accent-green: var(--color-light-green-600);
    --bg-accent-green-subtle: var(--color-light-green-100);
    --bg-accent-red: var(--color-light-red-600);
    --bg-accent-red-subtle: var(--color-light-red-100);
    --bg-accent-orange: var(--color-light-orange-600);
    --bg-accent-orange-subtle: var(--color-light-orange-100);

    /* Background Utilities */
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-blanket: rgba(0, 0, 0, 0.7);
    --bg-scrim: rgba(255, 255, 255, 0.8);

    /* Icon Colors */
    --icon-default: var(--color-black-800);
    --icon-secondary: var(--color-black-600);
    --icon-tertiary: var(--color-black-500);
    --icon-subtle-hover: var(--color-light-gray-700);
    --icon-subtle-active: var(--color-light-gray-700);
    --icon-disabled: var(--color-light-gray-600);
    --icon-strong-disabled: var(--color-light-gray-500);

    /* Icon Inverse */
    --icon-inverse: var(--color-light-gray-50);
    --icon-inverse-subtle: var(--color-light-gray-400);
    --icon-inverse-hover: var(--color-light-gray-500);
    --icon-inverse-active: var(--color-light-gray-600);

    /* Icon Brand */
    --icon-brand-bold: var(--color-light-purple-900);
    --icon-brand-hover: var(--color-light-purple-1000);
    --icon-brand-active: var(--color-light-purple-1100);
    --icon-brand-subtle: var(--color-light-purple-100);

    /* Icon Status */
    --icon-success: var(--color-light-green-900);
    --icon-danger: var(--color-light-red-900);
    --icon-warning: var(--color-light-orange-900);
    --icon-info: var(--color-light-blue-900);
    --icon-accent: var(--color-light-purple-900);

    /* Icon Accent */
    --icon-accent-blue: var(--color-light-purple-900);
    --icon-accent-purple: var(--color-light-purple-600);
    --icon-accent-green: var(--color-light-green-600);
    --icon-accent-orange: var(--color-light-orange-600);
    --icon-accent-red: var(--color-light-red-600);

    /* Border Colors */
    --border-subtle: var(--color-light-gray-300);
    --border-bold: var(--color-light-gray-800);
    --border-focus: var(--color-light-purple-600);

    /* Border Inverse */
    --border-inverse-default: var(--color-light-gray-50);

    /* Border Status Colors */
    --border-brand: var(--color-light-purple-900);
    --border-info: var(--color-light-blue-900);
    --border-warning: var(--color-light-orange-900);
    --border-danger: var(--color-light-red-900);
    --border-success: var(--color-light-green-900);

    /* Border Accent Colors */
    --border-accent-blue: var(--color-light-blue-900);
    --border-accent-purple: var(--color-light-purple-900);
    --border-accent-green: var(--color-light-green-900);
    --border-accent-orange: var(--color-light-orange-900);
    --border-accent-red: var(--color-light-red-900);

    /* Border Input */
    --border-input-default: var(--color-light-gray-300);

    /* Gradient Colors */
    --gradient-blue: var(--color-light-blue-600);
    --gradient-blue-subtle: var(--color-light-blue-100);
    --gradient-green: var(--color-light-green-600);
    --gradient-purple: var(--color-light-purple-600);
    --gradient-red: var(--color-light-red-600);
    --gradient-orange: var(--color-light-orange-600);
    --gradient-gray: var(--color-light-gray-600);
}

/* Dark Theme Override */
[data-theme="dark"] {
    /* Text Colors */
    --text-default: var(--color-white-800);
    --text-secondary: var(--color-white-600);
    --text-tertiary: var(--color-white-500);
    --text-label: var(--color-white-300);
    --text-disabled: var(--color-white-400);

    /* Text Inverse */
    --text-inverse: var(--color-dark-gray-50);
    --text-inverse-subtle: var(--color-dark-gray-75);

    /* Text Brand */
    --text-brand-bold: var(--color-dark-purple-900);
    --text-brand-bold-hover: var(--color-dark-purple-1000);
    --text-brand-bold-active: var(--color-dark-purple-1000);

    /* Text Link */
    --text-link: var(--color-dark-purple-800);
    --text-link-hover: var(--color-dark-purple-1000);
    --text-link-active: var(--color-dark-purple-1100);

    /* Text Status Colors */
    --text-brand: var(--color-dark-purple-900);
    --text-success: var(--color-dark-green-900);
    --text-danger: var(--color-dark-red-900);
    --text-warning: var(--color-dark-orange-900);
    --text-info: var(--color-dark-blue-900);

    /* Text Accent Colors */
    --text-accent-purple: var(--color-dark-purple-600);
    --text-accent-green: var(--color-dark-green-600);
    --text-accent-orange: var(--color-dark-orange-600);
    --text-accent-red: var(--color-dark-red-600);

    /* Background Colors */
    --bg-surface-default: var(--color-dark-gray-100);
    --bg-surface-raised: var(--color-dark-gray-200);
    --bg-surface-overlay: var(--color-dark-gray-300);
    --bg-surface-sunken: var(--color-dark-gray-50);
    --bg-surface-bold: var(--color-dark-gray-800);

    /* Background Neutral */
    --bg-neutral: var(--color-dark-neutral-10);
    --bg-neutral-hover: var(--color-dark-neutral-100);
    --bg-neutral-active: var(--color-dark-neutral-200);
    --bg-neutral-selected: var(--color-dark-neutral-100);
    --bg-neutral-disabled: var(--color-dark-neutral-200);

    /* Background Bold Neutral */
    --bg-bold-neutral: var(--color-dark-neutral-10);
    --bg-bold-neutral-hover: var(--color-dark-neutral-100);
    --bg-bold-neutral-active: var(--color-dark-neutral-200);
    --bg-bold-neutral-selected: var(--color-dark-neutral-100);
    --bg-bold-neutral-disabled: var(--color-white-100);

    /* Background Gray */
    --bg-gray-subtler: var(--color-dark-gray-200);
    --bg-gray-subtler-hover: var(--color-dark-gray-300);
    --bg-gray-subtler-active: var(--color-dark-gray-400);
    --bg-gray-subtle: var(--color-dark-gray-300);
    --bg-gray-subtle-hover: var(--color-dark-gray-400);
    --bg-gray-subtle-active: var(--color-dark-gray-500);
    --bg-gray-bold: var(--color-dark-gray-800);
    --bg-gray-bold-hover: var(--color-dark-gray-700);
    --bg-gray-bold-active: var(--color-dark-gray-600);

    /* Background Input */
    --bg-input-default: var(--color-dark-gray-100);
    --bg-input-hover: var(--color-dark-gray-100);

    /* Background Brand */
    --bg-brand: var(--color-dark-purple-900);
    --bg-brand-hover: var(--color-dark-purple-1000);
    --bg-brand-active: var(--color-dark-purple-1100);
    --bg-brand-subtle: var(--color-dark-neutral-100);

    /* Background Status */
    --bg-danger: var(--color-dark-red-900);
    --bg-danger-hover: var(--color-dark-red-1000);
    --bg-danger-active: var(--color-dark-red-1100);
    --bg-danger-subtle: var(--color-dark-neutral-100);

    --bg-success: var(--color-dark-green-900);
    --bg-success-hover: var(--color-dark-green-1000);
    --bg-success-active: var(--color-dark-green-1000);
    --bg-success-subtle: var(--color-dark-neutral-100);

    --bg-warning: var(--color-dark-orange-900);
    --bg-warning-hover: var(--color-dark-orange-1000);
    --bg-warning-active: var(--color-dark-orange-1100);
    --bg-warning-subtle: var(--color-dark-neutral-100);

    /* Background Accent */
    --bg-accent-blue: var(--color-dark-blue-600);
    --bg-accent-blue-subtle: var(--color-dark-neutral-100);
    --bg-accent-purple: var(--color-dark-purple-600);
    --bg-accent-purple-subtle: var(--color-dark-neutral-100);
    --bg-accent-green: var(--color-dark-green-600);
    --bg-accent-green-subtle: var(--color-dark-neutral-100);
    --bg-accent-red: var(--color-dark-red-600);
    --bg-accent-red-subtle: var(--color-dark-neutral-100);
    --bg-accent-orange: var(--color-dark-orange-600);
    --bg-accent-orange-subtle: var(--color-dark-neutral-100);

    /* Background Utilities */
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-blanket: rgba(0, 0, 0, 0.7);
    --bg-scrim: rgba(0, 0, 0, 0.8);

    /* Icon Colors */
    --icon-default: var(--color-white-800);
    --icon-secondary: var(--color-white-600);
    --icon-tertiary: var(--color-white-500);
    --icon-subtle-hover: var(--color-dark-gray-700);
    --icon-subtle-active: var(--color-dark-gray-800);
    --icon-disabled: var(--color-dark-gray-500);
    --icon-strong-disabled: var(--color-dark-gray-600);

    /* Icon Inverse */
    --icon-inverse: var(--color-dark-gray-50);
    --icon-inverse-subtle: var(--color-dark-gray-400);
    --icon-inverse-hover: var(--color-dark-gray-500);
    --icon-inverse-active: var(--color-dark-gray-600);

    /* Icon Brand */
    --icon-brand-bold: var(--color-dark-purple-900);
    --icon-brand-hover: var(--color-dark-purple-1000);
    --icon-brand-active: var(--color-dark-purple-1100);
    --icon-brand-subtle: var(--color-dark-neutral-100);

    /* Icon Status */
    --icon-success: var(--color-dark-green-900);
    --icon-danger: var(--color-dark-red-900);
    --icon-warning: var(--color-dark-orange-900);
    --icon-info: var(--color-dark-blue-900);
    --icon-accent: var(--color-dark-purple-900);

    /* Icon Accent */
    --icon-accent-blue: var(--color-dark-blue-600);
    --icon-accent-purple: var(--color-dark-purple-600);
    --icon-accent-green: var(--color-dark-green-600);
    --icon-accent-orange: var(--color-dark-orange-600);
    --icon-accent-red: var(--color-dark-red-600);

    /* Border Colors */
    --border-subtle: var(--color-dark-gray-400);
    --border-bold: var(--color-dark-gray-800);
    --border-focus: var(--color-dark-purple-600);
    --border-inverse-default: var(--color-dark-gray-100);

    /* Border Status Colors */
    --border-brand: var(--color-dark-purple-900);
    --border-info: var(--color-dark-blue-900);
    --border-warning: var(--color-dark-orange-900);
    --border-danger: var(--color-dark-red-900);
    --border-success: var(--color-dark-green-900);

    /* Border Accent Colors */
    --border-accent-blue: var(--color-dark-blue-900);
    --border-accent-purple: var(--color-dark-purple-900);
    --border-accent-green: var(--color-dark-green-900);
    --border-accent-orange: var(--color-dark-orange-900);
    --border-accent-red: var(--color-dark-red-900);

    /* Border Input */
    --border-input-default: var(--color-dark-gray-400);

    /* Gradient Colors */
    --gradient-blue: var(--color-dark-blue-600);
    --gradient-blue-subtle: var(--color-dark-neutral-100);
    --gradient-green: var(--color-dark-green-600);
    --gradient-purple: var(--color-dark-purple-600);
    --gradient-red: var(--color-dark-red-600);
    --gradient-orange: var(--color-dark-orange-600);
    --gradient-gray: var(--color-light-gray-100);
}


:root {
    /* Typography */
    --font-size-100: 12px;
    --font-size-200: 14px;
    --font-size-300: 16px;
    --font-size-400: 18px;
    --font-size-500: 24px;
    --font-size-600: 32px;
    --font-size-700: 40px;
    --font-size-800: 48px;
    --font-size-900: 64px;
    --font-size-1000: 80px;

    --line-height-xxxs: 12px;
    --line-height-xxs: 16px;
    --line-height-xs: 20px;
    --line-height-s: 22px;
    --line-height-m: 24px;
    --line-height-l: 26px;
    --line-height-xl: 30px;
    --line-height-xxl: 40px;
    --line-height-3xl: 48px;
    --line-height-4xl: 56px;
    --line-height-5xl: 80px;

    --font-weight-thin: 100;
    --font-weight-extra-light: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;

    /* Spacing */
    --spacing-xxxl: 64px;
    --spacing-xxl: 40px;
    --spacing-xl: 32px;
    --spacing-l: 24px;
    --spacing-m: 16px;
    --spacing-s: 12px;
    --spacing-xs: 8px;
    --spacing-xxs: 4px;
    --spacing-xxxs: 2px;
    --spacing-none: 0;
    --spacing-negative-xxxl: -64px;
    --spacing-negative-m: -16px;
    --spacing-negative-s: -8px;
    --spacing-negative-xs: -4px;
    --spacing-negative-xxs: -2px;

    /* Sizes */
    --size-component-xlarge: 64px;
    --size-component-large: 48px;
    --size-component-base: 40px;
    --size-component-small: 32px;
    --size-component-xsmall: 24px;
    --size-component-xxsmall: 16px;

    --size-icon-large: 32px;
    --size-icon-base: 24px;
    --size-icon-small: 16px;
    --size-icon-xsmall: 12px;

    /* Section Spacing */
    --section-spacing-s: 32px;
    --section-spacing-m: 64px;
    --section-spacing-l: 96px;
    --section-spacing-xl: 160px;
    --section-spacing-xxl: 216px;

    /* Corner Radius */
    --corner-radius-s: 4px;
    --corner-radius-m: 8px;
    --corner-radius-l: 16px;
    --corner-radius-ring: 12px;
    --corner-radius-round: 100%;

    /* Breakpoints */
    --breakpoint-small: 375px;
    --breakpoint-medium: 600px;
    --breakpoint-large: 900px;
    --breakpoint-xlarge: 1200px;


  }