@charset "utf-8";

/* ========================================
   Design System CSS Variables
   Generated from Figma Design Tokens
   ======================================== */

/* ========================================
   PRIMITIVE COLORS
   ======================================== */

/* Gray Scale */
:root {
    /* Gray */
    --color-gray-1000: rgb(25, 26, 32);
    --color-gray-900: rgb(45, 50, 61);
    --color-gray-800: rgb(53, 55, 68);
    --color-gray-700: rgb(82, 84, 99);
    --color-gray-600: rgb(108, 110, 126);
    --color-gray-500: rgb(140, 143, 159);
    --color-gray-400: rgb(205, 206, 214);
    --color-gray-300: rgb(229, 230, 232);
    --color-gray-200: rgb(225, 225, 232);
    --color-gray-100: rgb(232, 232, 238);
    --color-gray-50: rgb(240, 240, 245);
    --color-gray-20: rgb(247, 247, 250);

    /* Red */
    --color-red-1000: rgb(34, 8, 11);
    --color-red-900: rgb(80, 13, 20);
    --color-red-800: rgb(152, 37, 49);
    --color-red-700: rgb(202, 49, 65);
    --color-red-600: rgb(253, 61, 81);
    --color-red-500: rgb(253, 100, 116);
    --color-red-400: rgb(254, 178, 186);
    --color-red-300: rgb(255, 217, 221);
    --color-red-200: rgb(255, 236, 238);
    --color-red-100: rgb(255, 242, 243);

    /* Blue */
    --color-blue-1000: rgb(0, 30, 49);
    --color-blue-900: rgb(0, 51, 85);
    --color-blue-800: rgb(0, 89, 148);
    --color-blue-700: rgb(0, 119, 197);
    --color-blue-600: rgb(0, 149, 246);
    --color-blue-500: rgb(51, 170, 248);
    --color-blue-400: rgb(102, 191, 250);
    --color-blue-300: rgb(138, 206, 251);
    --color-blue-200: rgb(204, 234, 253);
    --color-blue-100: rgb(233, 246, 255);

    /* Vivid Blue */
    --color-vivid-blue-1000: rgb(6, 21, 62);
    --color-vivid-blue-900: rgb(0, 46, 114);
    --color-vivid-blue-800: rgb(0, 61, 154);
    --color-vivid-blue-700: rgb(0, 80, 197);
    --color-vivid-blue-600: rgb(33, 119, 244);
    --color-vivid-blue-500: rgb(66, 143, 255);
    --color-vivid-blue-400: rgb(120, 176, 255);
    --color-vivid-blue-300: rgb(180, 211, 255);
    --color-vivid-blue-200: rgb(197, 220, 252);
    --color-vivid-blue-100: rgb(233, 242, 255);
    --color-vivid-blue-50: rgb(245, 249, 255);
    --color-vivid-blue-650: rgb(21, 105, 228);

    /* Orange */
    --color-orange-1000: rgb(51, 25, 4);
    --color-orange-900: rgb(102, 50, 7);
    --color-orange-800: rgb(153, 76, 11);
    --color-orange-700: rgb(204, 101, 14);
    --color-orange-600: rgb(255, 126, 18);
    --color-orange-500: rgb(255, 152, 65);
    --color-orange-400: rgb(255, 178, 113);
    --color-orange-300: rgb(255, 203, 160);
    --color-orange-200: rgb(255, 229, 208);
    --color-orange-100: rgb(255, 242, 231);

    /* Green */
    --color-green-1000: rgb(6, 42, 16);
    --color-green-900: rgb(11, 84, 32);
    --color-green-800: rgb(17, 125, 47);
    --color-green-700: rgb(22, 167, 63);
    --color-green-600: rgb(24, 192, 71);
    --color-green-500: rgb(74, 213, 113);
    --color-green-400: rgb(124, 222, 152);
    --color-green-300: rgb(166, 237, 187);
    --color-green-200: rgb(210, 244, 220);
    --color-green-100: rgb(232, 250, 237);

    /* Cyan */
    --color-cyan-1000: rgb(0, 35, 41);
    --color-cyan-900: rgb(0, 71, 79);
    --color-cyan-800: rgb(0, 109, 117);
    --color-cyan-700: rgb(8, 161, 166);
    --color-cyan-600: rgb(6, 183, 183);
    --color-cyan-500: rgb(12, 196, 196);
    --color-cyan-400: rgb(92, 219, 211);
    --color-cyan-300: rgb(135, 232, 222);
    --color-cyan-200: rgb(202, 245, 239);
    --color-cyan-100: rgb(225, 252, 248);

    /* Purple */
    --color-purple-1000: rgb(18, 3, 56);
    --color-purple-900: rgb(57, 16, 133);
    --color-purple-800: rgb(83, 29, 171);
    --color-purple-700: rgb(114, 46, 209);
    --color-purple-600: rgb(146, 84, 222);
    --color-purple-500: rgb(179, 127, 235);
    --color-purple-400: rgb(211, 173, 247);
    --color-purple-300: rgb(235, 215, 250);
    --color-purple-200: rgb(242, 225, 255);
    --color-purple-100: rgb(249, 240, 255);

    /* Yellow */
    --color-yellow-1000: rgb(97, 53, 0);
    --color-yellow-900: rgb(135, 88, 0);
    --color-yellow-800: rgb(231, 154, 0);
    --color-yellow-700: rgb(243, 178, 0);
    --color-yellow-600: rgb(255, 200, 1);
    --color-yellow-500: rgb(255, 208, 1);
    --color-yellow-400: rgb(255, 223, 61);
    --color-yellow-300: rgb(255, 230, 117);
    --color-yellow-200: rgb(255, 242, 184);
    --color-yellow-100: rgb(255, 246, 212);

    /* Black & White */
    --color-black: rgb(0, 0, 0);
    --color-white: rgb(255, 255, 255);

    /* Black Alpha Variants */
    --color-black-alpha-95: rgba(0, 0, 0, 0.95);
    --color-black-alpha-85: rgba(0, 0, 0, 0.85);
    --color-black-alpha-80: rgba(0, 0, 0, 0.8);
    --color-black-alpha-75: rgba(0, 0, 0, 0.75);
    --color-black-alpha-70: rgba(0, 0, 0, 0.7);
    --color-black-alpha-65: rgba(0, 0, 0, 0.65);
    --color-black-alpha-55: rgba(0, 0, 0, 0.55);
    --color-black-alpha-50: rgba(0, 0, 0, 0.5);
    --color-black-alpha-45: rgba(0, 0, 0, 0.45);
    --color-black-alpha-40: rgba(0, 0, 0, 0.4);
    --color-black-alpha-30: rgba(0, 0, 0, 0.3);
    --color-black-alpha-25: rgba(0, 0, 0, 0.25);
    --color-black-alpha-15: rgba(0, 0, 0, 0.15);
    --color-black-alpha-10: rgba(0, 0, 0, 0.1);
    --color-black-alpha-5: rgba(0, 0, 0, 0.05);

    /* White Alpha Variants */
    --color-white-alpha-95: rgba(255, 255, 255, 0.95);
    --color-white-alpha-85: rgba(255, 255, 255, 0.85);
    --color-white-alpha-80: rgba(255, 255, 255, 0.8);
    --color-white-alpha-75: rgba(255, 255, 255, 0.75);
    --color-white-alpha-70: rgba(255, 255, 255, 0.7);
    --color-white-alpha-65: rgba(255, 255, 255, 0.65);
    --color-white-alpha-55: rgba(255, 255, 255, 0.55);
    --color-white-alpha-50: rgba(255, 255, 255, 0.5);
    --color-white-alpha-45: rgba(255, 255, 255, 0.45);
    --color-white-alpha-40: rgba(255, 255, 255, 0.4);
    --color-white-alpha-30: rgba(255, 255, 255, 0.3);
    --color-white-alpha-25: rgba(255, 255, 255, 0.25);
    --color-white-alpha-15: rgba(255, 255, 255, 0.15);
    --color-white-alpha-10: rgba(255, 255, 255, 0.1);
    --color-white-alpha-5: rgba(255, 255, 255, 0.05);

    /* Special Alpha Variants */
    --color-vivid-blue-600-alpha-10: rgba(33, 119, 244, 0.1);
    --color-red-600-alpha-10: rgba(253, 61, 81, 0.1);
}

/* ========================================
   SEMANTIC COLORS - LIGHT MODE
   ======================================== */

:root {
    /* Background Colors */
    --semantic-background-default: var(--color-white);
    --semantic-background-default-subtle: var(--color-gray-20);
    --semantic-background-default-subtler: var(--color-gray-50);
    --semantic-background-dim: var(--color-black-alpha-15);
    --semantic-background-divider: var(--color-gray-50);
    --semantic-background-inverse: var(--color-black);

    /* Surface Colors */
    --semantic-surface-default: var(--color-white);
    --semantic-surface-default-subtle: var(--color-gray-20);
    --semantic-surface-default-subtler: var(--color-gray-100);
    --semantic-surface-disabled: var(--color-gray-300);
    --semantic-surface-danger: var(--color-red-100);
    --semantic-surface-warning: var(--color-orange-100);
    --semantic-surface-success: var(--color-green-100);
    --semantic-surface-info: var(--color-blue-100);
    --semantic-surface-inverse: var(--color-gray-900);
    --semantic-surface-toast: var(--color-gray-50);
    --semantic-surface-primary: var(--color-vivid-blue-600);
    --semantic-surface-primary-lighter: var(--color-vivid-blue-50);
    --semantic-surface-secondary : var(--color-gray-700);

    /* Text Colors */
    --semantic-text-default: var(--color-black);
    --semantic-text-subtle: var(--color-gray-700);
    --semantic-text-subtler: var(--color-gray-500);
    --semantic-text-muted: var(--color-gray-400);
    --semantic-text-primary: var(--color-vivid-blue-600);
    --semantic-text-secondary: var(--color-gray-800);
    --semantic-text-danger: var(--color-red-700);
    --semantic-text-warning: rgb(204, 101, 14);
    --semantic-text-success: var(--color-green-800);
    --semantic-text-info: var(--color-blue-700);
    --semantic-text-inverse: var(--color-white);
    --semantic-text-inverse-static: var(--color-white);
    --semantic-text-static: var(--color-black);
    --semantic-text-disabled: var(--color-gray-500);
    --semantic-text-button-disabled: var(--color-white);

    /* Border Colors */
    --semantic-border-border: var(--color-gray-200);
    --semantic-border-border-light: var(--color-gray-20);
    --semantic-border-divider: var(--color-gray-50);
    --semantic-border-border-primary-active: var(--color-vivid-blue-600);
    --semantic-border-border-primary-dark: var(--color-vivid-blue-700);
    --semantic-border-border-error: var(--color-red-600);
    --semantic-border-border-inverse: var(--color-gray-800);

    /* Button Colors */
    --semantic-button-primary-fill: var(--color-vivid-blue-600);
    --semantic-button-primary-fill-pressed: var(--color-vivid-blue-700);
    --semantic-button-primary-outline: var(--color-white);
    --semantic-button-primary-outline-pressed: var(--color-vivid-blue-100);
    --semantic-button-primary-outline-border: var(--color-vivid-blue-600);
    --semantic-button-secondary-fill: var(--color-gray-700);
    --semantic-button-secondary-fill-pressed: var(--color-gray-900);
    --semantic-button-secondary-outline: var(--color-white);
    --semantic-button-secondary-outline-pressed: var(--color-black-alpha-5);
    --semantic-button-secondary-outline-border: var(--color-gray-300);
    --semantic-button-danger-fill: var(--color-red-600);
    --semantic-button-danger-fill-pressed: var(--color-red-700);
    --semantic-button-danger-outline-border: var(--color-red-600);
    --semantic-button-danger-outline-pressed: var(--color-red-100);
    --semantic-button-disabled: var(--color-gray-400);
    --semantic-button-primary-textbtn-pressed: var(--color-vivid-blue-600-alpha-10);
    --semantic-button-secondary-textbtn-pressed: var(--color-white-alpha-10);
    --semantic-button-on-map: var(--color-white);

    /* Input Colors */
    --semantic-input-surface: var(--color-white);
    --semantic-input-border: var(--color-gray-200);
    --semantic-input-border-active: var(--color-gray-1000);
    --semantic-input-border-error: var(--color-red-600);
    --semantic-input-surface-disabled: var(--color-gray-50);
    --semantic-input-border-disabled: var(--color-gray-400);

    /* Icon Colors */
    --semantic-icon-default: var(--color-gray-900);
    --semantic-icon-gray: var(--color-gray-600);
    --semantic-icon-gray-light: var(--color-gray-500);
    --semantic-icon-gray-extra-light: var(--color-gray-400);
    --semantic-icon-gray-super-light: var(--color-gray-300);
    --semantic-icon-primary: var(--color-vivid-blue-600);
    --semantic-icon-primary-light: var(--color-vivid-blue-400);
    --semantic-icon-inverse: var(--color-white-alpha-30);
    --semantic-icon-inverse-static: var(--color-white);
    --semantic-icon-static: var(--color-gray-900);
    --semantic-icon-black: var(--color-black);
    --semantic-icon-danger: var(--color-red-700);
    --semantic-icon-success: var(--color-green-800);
    --semantic-icon-warning: var(--color-orange-700);
    --semantic-icon-info: var(--color-blue-700);
    --semantic-icon-point: var(--color-red-500);
    --semantic-icon-disabled: var(--color-gray-400);

    /* Element Colors */
    --semantic-element-primary: var(--color-vivid-blue-600);
    --semantic-element-primary-light: var(--color-vivid-blue-500);
    --semantic-element-primary-lighter: var(--color-vivid-blue-100);
    --semantic-element-inverse: var(--color-white);
    --semantic-element-inverse-static: var(--color-white);
    --semantic-element-disabled: var(--color-gray-600);
    --semantic-element-disabled-lighter: var(--color-gray-50);
    --semantic-element-gray: var(--color-gray-400);
    --semantic-element-gray-light: var(--color-gray-300);
    --semantic-element-gray-dark: var(--color-gray-600);
    --semantic-element-success: var(--color-green-800);
    --semantic-element-success-lighter: var(--color-green-200);
    --semantic-element-danger: var(--color-red-700);
    --semantic-element-danger-lighter: var(--color-red-200);
    --semantic-element-warning: var(--color-orange-700);
    --semantic-element-warning-lighter: var(--color-orange-100);
    --semantic-element-info: var(--color-vivid-blue-700);
    --semantic-element-info-lighter: var(--color-vivid-blue-100);
    --semantic-element-graph-dot: var(--color-white);
    --semantic-element-bike-card: var(--color-gray-500);

    /* Action Colors */
    --semantic-action-primary: var(--color-vivid-blue-600);
    --semantic-action-default: var(--color-white);
    --semantic-action-inverse-static: var(--color-white);
    --semantic-action-pressed: var(--color-gray-20);
    --semantic-action-tabIndex-pressed: var(--color-gray-200);
}

/* ========================================
   SEMANTIC COLORS - DARK MODE (REMOVED MEDIA QUERY)
   @media (prefers-color-scheme: dark) {
  :root {

   ======================================== */

/* ========================================
   DARK MODE CLASS OVERRIDES
   ======================================== */

body.dark-mode {
    /* Background Colors */
    --semantic-background-default: var(--color-gray-1000);
    --semantic-background-default-subtle: var(--color-black);
    --semantic-background-default-subtler: var(--color-gray-900);
    --semantic-background-dim: var(--color-black-alpha-75);
    --semantic-background-divider: var(--color-black-alpha-75);
    --semantic-background-inverse: var(--color-gray-100);

    /* Surface Colors */
    --semantic-surface-default: var(--color-gray-1000);
    --semantic-surface-default-subtle: var(--color-gray-900);
    --semantic-surface-default-subtler: var(--color-gray-800);
    --semantic-surface-disabled: var(--color-black-alpha-75);
    --semantic-surface-danger: var(--color-red-900);
    --semantic-surface-warning: var(--color-orange-900);
    --semantic-surface-success: var(--color-green-900);
    --semantic-surface-info: var(--color-blue-900);
    --semantic-surface-inverse: var(--color-gray-50);
    --semantic-surface-toast: var(--color-gray-900);
    --semantic-surface-primary: var(--color-vivid-blue-700);
    --semantic-surface-primary-lighter: var(--color-vivid-blue-1000);
    --semantic-surface-secondary : var(--color-gray-700);

    /* Text Colors */
    --semantic-text-default: var(--color-white);
    --semantic-text-subtle: var(--color-gray-100);
    --semantic-text-subtler: var(--color-gray-200);
    --semantic-text-muted: var(--color-gray-300);
    --semantic-text-primary: var(--color-vivid-blue-500);
    --semantic-text-secondary: var(--color-gray-20);
    --semantic-text-danger: var(--color-red-500);
    --semantic-text-warning: var(--color-orange-300);
    --semantic-text-success: var(--color-green-200);
    --semantic-text-info: var(--color-blue-200);
    --semantic-text-inverse: var(--color-black);
    --semantic-text-inverse-static: var(--color-white);
    --semantic-text-static: var(--color-black);
    --semantic-text-disabled: var(--color-gray-500);
    --semantic-text-button-disabled: var(--color-white-alpha-30);

    /* Border Colors */
    --semantic-border-border: var(--color-gray-800);
    --semantic-border-border-light: var(--color-gray-800);
    --semantic-border-divider: var(--color-gray-900);
    --semantic-border-border-primary-active: var(--color-vivid-blue-600);
    --semantic-border-border-primary-dark: var(--color-vivid-blue-700);
    --semantic-border-border-error: var(--color-red-600);
    --semantic-border-border-inverse: var(--color-gray-200);

    /* Button Colors */
    --semantic-button-primary-fill: var(--color-vivid-blue-600);
    --semantic-button-primary-fill-pressed: var(--color-vivid-blue-700);
    --semantic-button-primary-outline: var(--color-vivid-blue-600);
    --semantic-button-primary-outline-pressed: var(--color-vivid-blue-700);
    --semantic-button-primary-outline-border: var(--color-vivid-blue-700);
    --semantic-button-secondary-fill: var(--color-gray-700);
    --semantic-button-secondary-fill-pressed: var(--color-gray-900);
    --semantic-button-secondary-outline: transparent;
    --semantic-button-secondary-outline-pressed: var(--color-white-alpha-10);
    --semantic-button-secondary-outline-border: var(--color-gray-700);
    --semantic-button-danger-fill: var(--color-red-600);
    --semantic-button-danger-fill-pressed: var(--color-red-700);
    --semantic-button-danger-outline-border: var(--color-red-700);
    --semantic-button-danger-outline-pressed: var(--color-red-700);
    --semantic-button-disabled: var(--color-gray-1000);
    --semantic-button-primary-textbtn-pressed: var(--color-vivid-blue-600-alpha-10);
    --semantic-button-secondary-textbtn-pressed: var(--color-white-alpha-10);
    --semantic-button-on-map: var(--color-black);

    /* Input Colors */
    --semantic-input-surface: var(--color-black);
    --semantic-input-border: var(--color-gray-700);
    --semantic-input-border-active: var(--color-gray-20);
    --semantic-input-border-error: var(--color-red-600);
    --semantic-input-surface-disabled: var(--color-gray-800);
    --semantic-input-border-disabled: var(--color-gray-700);

    /* Icon Colors */
    --semantic-icon-default: var(--color-gray-20);
    --semantic-icon-gray: var(--color-gray-100);
    --semantic-icon-gray-light: var(--color-gray-300);
    --semantic-icon-gray-extra-light: var(--color-gray-400);
    --semantic-icon-gray-super-light: var(--color-gray-500);
    --semantic-icon-primary: var(--color-vivid-blue-600);
    --semantic-icon-primary-light: var(--color-vivid-blue-600);
    --semantic-icon-inverse: var(--color-white-alpha-30);
    --semantic-icon-inverse-static: var(--color-white);
    --semantic-icon-static: var(--color-gray-900);
    --semantic-icon-black: var(--color-white);
    --semantic-icon-danger: var(--color-red-500);
    --semantic-icon-success: var(--color-green-500);
    --semantic-icon-warning: var(--color-orange-500);
    --semantic-icon-info: var(--color-blue-400);
    --semantic-icon-point: var(--color-red-500);
    --semantic-icon-disabled: var(--color-gray-700);

    /* Element Colors */
    --semantic-element-primary: var(--color-vivid-blue-600);
    --semantic-element-primary-light: var(--color-vivid-blue-800);
    --semantic-element-primary-lighter: var(--color-vivid-blue-900);
    --semantic-element-inverse: var(--color-black);
    --semantic-element-inverse-static: var(--color-white);
    --semantic-element-disabled: var(--color-gray-500);
    --semantic-element-disabled-lighter: var(--color-gray-900);
    --semantic-element-gray: var(--color-gray-700);
    --semantic-element-gray-light: var(--color-gray-800);
    --semantic-element-gray-dark: var(--color-gray-500);
    --semantic-element-success: var(--color-green-700);
    --semantic-element-success-lighter: var(--color-green-900);
    --semantic-element-danger: var(--color-red-700);
    --semantic-element-danger-lighter: var(--color-red-900);
    --semantic-element-warning: var(--color-orange-500);
    --semantic-element-warning-lighter: var(--color-orange-900);
    --semantic-element-info: var(--color-vivid-blue-600);
    --semantic-element-info-lighter: var(--color-vivid-blue-900);
    --semantic-element-graph-dot: var(--color-gray-1000);
    --semantic-element-bike-card: var(--color-gray-800);

    /* Action Colors */
    --semantic-action-primary: var(--color-vivid-blue-600);
    --semantic-action-default: var(--color-black);
    --semantic-action-inverse-static: var(--color-white);
    --semantic-action-pressed: var(--color-gray-800);
    --semantic-action-tabIndex-pressed: var(--color-gray-600);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Background Colors */
.bg-default { background-color: var(--semantic-background-default); }
.bg-default-subtle { background-color: var(--semantic-background-default-subtle); }
.bg-default-subtler { background-color: var(--semantic-background-default-subtler); }
.bg-dim { background-color: var(--semantic-background-dim); }
.bg-inverse { background-color: var(--semantic-background-inverse); }

/* Surface Colors */
.surface-default { background-color: var(--semantic-surface-default); }
.surface-default-subtle { background-color: var(--semantic-surface-default-subtle); }
.surface-default-subtler { background-color: var(--semantic-surface-default-subtler); }
.surface-disabled { background-color: var(--semantic-surface-disabled); }
.surface-danger { background-color: var(--semantic-surface-danger); }
.surface-warning { background-color: var(--semantic-surface-warning); }
.surface-success { background-color: var(--semantic-surface-success); }
.surface-info { background-color: var(--semantic-surface-info); }
.surface-inverse { background-color: var(--semantic-surface-inverse); }
.surface-primary { background-color: var(--semantic-surface-primary); }

/* Text Colors */
.text-default { color: var(--semantic-text-default); }
.text-subtle { color: var(--semantic-text-subtle); }
.text-subtler { color: var(--semantic-text-subtler); }
.text-muted { color: var(--semantic-text-muted); }
.text-primary { color: var(--semantic-text-primary); }
.text-secondary { color: var(--semantic-text-secondary); }
.text-danger { color: var(--semantic-text-danger); }
.text-warning { color: var(--semantic-text-warning); }
.text-success { color: var(--semantic-text-success); }
.text-info { color: var(--semantic-text-info); }
.text-inverse { color: var(--semantic-text-inverse); }
.text-disabled { color: var(--semantic-text-disabled); }

/* Border Colors */
.border-default { border-color: var(--semantic-border-border); }
.border-light { border-color: var(--semantic-border-border-light); }
.border-primary { border-color: var(--semantic-border-border-primary-active); }
.border-error { border-color: var(--semantic-border-border-error); }
.border-inverse { border-color: var(--semantic-border-border-inverse); }

/* Icon Colors */
.icon-default { color: var(--semantic-icon-default); }
.icon-gray { color: var(--semantic-icon-gray); }
.icon-primary { color: var(--semantic-icon-primary); }
.icon-danger { color: var(--semantic-icon-danger); }
.icon-success { color: var(--semantic-icon-success); }
.icon-warning { color: var(--semantic-icon-warning); }
.icon-info { color: var(--semantic-icon-info); }
.icon-disabled { color: var(--semantic-icon-disabled); }
.icon-inverse { color: var(--semantic-icon-inverse); }

/* Element Colors */
.element-primary { background-color: var(--semantic-element-primary); }
.element-success { background-color: var(--semantic-element-success); }
.element-danger { background-color: var(--semantic-element-danger); }
.element-warning { background-color: var(--semantic-element-warning); }
.element-info { background-color: var(--semantic-element-info); }
.element-disabled { background-color: var(--semantic-element-disabled); }
.element-inverse { background-color: var(--semantic-element-inverse); }
.element-gray { background-color: var(--semantic-element-gray); }


/* ========================================
   font system
   ======================================== */

/*---label font---*/
.label_large {
    font-size: 16px;
    line-height: 1.4em;
    font-weight: 400;
}

.label_medium {
    font-size: 14px;
    line-height: 1.14em;
    font-weight: 400;
}

.label_small {
    font-size: 12px;
    line-height: 1.14em;
    font-weight: 400;
}

.label_x-small {
    font-size: 10px;
    line-height: 0.75em;
    font-weight: 600;
}

/*---body font---*/
.body_large {
    font-size: 18px;
    line-height: 1.75em;
    font-weight: 400;
}

.body_medium {
    font-size: 16px;
    line-height: 1.5em;
    font-weight: 400;
}

.body_small {
    font-size: 14px;
    line-height: 1.25em;
    font-weight: 400;
}

.body_x-small {
    font-size: 12px;
    line-height: 1.25em;
    font-weight: 400;
}

/*---title font---*/
.title_xx-large {
    font-size: 22px;
    line-height: 2em;
    font-weight: 600;
}

.title_x-large {
    font-size: 20px;
    line-height: 1.75em;
    font-weight: 600;
}

.title_large {
    font-size: 18px;
    line-height: 1.5em;
    font-weight: 600;
}

.title_medium {
    font-size: 16px;
    line-height: 1.5em;
    font-weight: 600;
}

.title_small {
    font-size: 14px;
    line-height: 1.25em;
    font-weight: 600;
}

.title_x-small {
    font-size: 12px;
    line-height: 1.125em;
    font-weight: 600;
}

/*---headline font---*/
.head_xx-large {
    font-size: 40px;
    line-height: 3.25em;
    font-weight: 600;
}

.head_x-large {
    font-size: 36px;
    line-height: 2.75em;
    font-weight: 600;
}

.head_large {
    font-size: 32px;
    line-height: 2.5em;
    font-weight: 600;
}

.head_medium {
    font-size: 28px;
    line-height: 2.25em;
    font-weight: 600;
}

.head_small {
    font-size: 24px;
    line-height: 2em;
    font-weight: 600;
}

/*---display font---*/
.display_large {
    font-size: 96px;
    line-height: 7em;
    font-weight: 600;
}

.display_medium {
    font-size: 52px;
    line-height: 4em;
    font-weight: 600;
}

.display_small {
    font-size: 44px;
    line-height: 3.25em;
    font-weight: 600;
}

.display_x-small {
    font-size: 36px;
    line-height: 2.75em;
    font-weight: 600;
}

body{
    font-size: 16px;
    line-height: 1.4rem;
    background-color: var(--semantic-surface-default);
    color: var(--semantic-text-default);
}