@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
    /* FONT FACE */
    --font-face: "DM Sans", sans-serif;
    --header-font: var(--font-face);

    /* HEADINGS */
    --h1-size: clamp(1.75rem, 3vw, 2.3rem);
    --h2-size: clamp(1.25rem, 2.5vw, 1.875rem);
    --h3-size: clamp(1.25rem, 2.5vw, 1.5rem);
    --h4-size: clamp(1.125rem, 2.5vw, 1.25rem);
    --h5-size: clamp(1.0625rem, 2.5vw, 1.125rem);
    --h6-size: clamp(1rem, 2.5vw, 1.0625rem);

    /* FONT DISPLAY */
    --font-display: clamp(0.9375rem, 2vw, 1rem);
    --font-display-xl: clamp(2.4rem, 5vw, 3.4rem);
    --font-display-lg: clamp(1.75rem, 4vw, 2.5rem);
    --font-display-md: clamp(1.125rem, 2.5vw, 1.25rem);
    --font-display-sm: clamp(1.0625rem, 2.5vw, 1.125rem);
    --font-display-xs: clamp(1rem, 2.5vw, 1.0625rem);

    /* BOLD */
    --font-bolder: 900;
    --font-bold: 700;
    --font-semi-bold: 600;
    --font-medium: 500;
    --font-regular: 400;
    --font-light: 300;
    --font-lighter: 200;

    /* COLORS */
    --color-white: 255 255 255;
    --color-black: 0 0 0;
    --color-gray-50: 248 247 244;
    --color-gray-100: 239 238 234;
    --color-gray-200: 220 222 226;
    --color-gray-300: 185 190 198;
    --color-gray-400: 140 148 160;
    --color-gray-500: 95 105 120;
    --color-gray-800: 38 45 55;
    --color-red: 225 122 122;
    --color-red-50: 255 235 235;
    --color-red-600: 180 80 80;
    --color-blue: 130 170 220;
    --color-blue-50: 230 240 255;
    --color-blue-600: 85 120 170;
    --color-yellow: 240 210 120;
    --color-yellow-50: 255 248 220;
    --color-yellow-600: 200 170 80;
    --color-green: 140 190 160;
    --color-green-50: 235 250 240;
    --color-green-600: 90 140 110;
    --color-purple: 180 150 210;
    --color-purple-50: 245 240 255;
    --color-purple-600: 130 100 170;
    --color-orange: 240 170 130;
    --color-orange-50: 255 240 230;
    --color-orange-600: 200 120 80;

    /* CONTAINER */
    --container-width: min(1200px, calc(100dvw - 2.5rem));
    --container-fluid-width: min(100dvw, calc(100dvw - 0rem));
    --container-gutter-x: 0.8rem;

    /* WIDTH */
    --dvw-100: 100dvw;

    /* MARGINS */
    --margin-none: 0px;
    --margin-1: 2px;
    --margin-2: 4px;
    --margin-3: 6px;
    --margin-r1: 1rem;
    --margin-r2: 4rem;
    --margin-r3: 6rem;

    /* PADDING */
    --padding-none: 0px;
    --padding-1: 2px;
    --padding-2: 4px;
    --padding-3: 6px;

    /* LAYOUT */
    --radius-sm: 0.55rem;
    --radius-md: 0.9rem;
    --radius-lg: 1.25rem;
    --border-width: 1px;
    --section-gap: clamp(1rem, 3vw, 2rem);
    --control-height: 2.75rem;
    --control-padding-x: 0.85rem;
    --navbar-height: 3.5rem;
    --navbar-menu-toggle-size: 2.4rem;
    --navbar-menu-line-width: 1.15rem;
    --navbar-menu-line-height: 2px;
    --overlay-padding: 1rem;
    --overlay-blur: 10px;
    --overlay-backdrop-alpha: 0.55;
    --modal-width: min(40rem, calc(100dvw - 1.5rem));
    --offcanvas-width: min(24rem, calc(100dvw - 1rem));
    --linkborder-raidus: 999px;
    --z-index-header: 100;
    --z-index-overlay: 500;
    --transition-fast: 0.2s ease;
}

html[data-color-mode="dark"] {
    color-scheme: dark;

    --body-background: 31 38 44;
    --body-text: 241 244 246;
    --body-muted: 185 190 198;
    --surface-1: 38 45 55;
    --surface-2: 31 38 44;
    --surface-3: 95 105 120;
    --border-color: 95 105 120;
    --shadow-color: 0 0 0;
    --link-color: 240 210 120;
    --focus-ring: 240 210 120;
    --code-background: 38 45 55;
    --code-text: 245 240 255;
    --overlay-backdrop: 0 0 0;

    --button-primary-bg: 240 210 120;
    --button-primary-text: 31 38 44;
    --button-secondary-bg: 38 45 55;
    --button-secondary-text: 241 244 246;
    --button-ghost-text: 255 248 220;
    --button-soft-bg: 95 105 120;

    --navbar-bg: 38 45 55;
    --navbar-text: 255 248 220;
    --navbar-brand: 200 170 80;
    --nav-link-hover-bg: 95 105 120;
    --nav-link-hover-text: 200 170 80;
}

html[data-color-mode="light"] {
    color-scheme: light;

    --body-text: 38 45 55;
    --body-muted: 95 105 120;
    --surface-1: 255 255 255;
    --surface-2: 239 238 234;
    --surface-3: 248 247 244;
    --border-color: 220 222 226;
    --shadow-color: 38 45 55;
    --link-color: 130 100 170;
    --focus-ring: 200 170 80;
    --code-background: 239 238 234;
    --code-text: 38 45 55;
    --overlay-backdrop: 38 45 55;

    --button-primary-bg: 200 170 80;
    --button-primary-text: 38 45 55;
    --button-secondary-bg: 255 255 255;
    --button-secondary-text: 38 45 55;
    --button-ghost-text: 38 45 55;
    --button-soft-bg: 239 238 234;

    --navbar-bg: 255 255 255;
    --navbar-text: 38 45 55;
    --navbar-brand: 130 100 170;
    --nav-link-hover-bg: 239 238 234;
    --nav-link-hover-text: 130 100 170;
}