:root {
    --bg-dark: oklch(0.92 0 30);
    --bg: oklch(0.96 0 30);
    --bg-light: oklch(1 0 30);
    --text: oklch(0.15 0 30);
    --text-muted: oklch(0.4 0 30);
    --highlight: oklch(1 0 30);
    --border: oklch(0.6 0 30);
    --border-muted: oklch(0.7 0 30);
    --primary: oklch(0.4 0.2 30);
    --secondary: oklch(0.4 0.2 210);
    --danger: oklch(0.5 0.2 30);
    --warning: oklch(0.5 0.2 100);
    --success: oklch(0.5 0.2 160);
    --info: oklch(0.5 0.2 260);

    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

    --shadow-m: inset 0 2px 4px #ffffff50,
        /* top highlight */
        0 4px 8px #00000030,
        /* dark shadow */
        0 8px 16px #00000015;
    /* soft shadow */
    --shadow-l: inset 0 2px 4px #ffffff70,
        /* top highlight */
        0 8px 12px #00000030,
        /* dark shadow */
        0 12px 20px #00000015;
    /* soft shadow */

    --dist-none: 0;
    --dist-xxs: clamp(4.8px, 100vw*0.00210526315789474 + 3.95789473684211px, 8px);
    --dist-xs: clamp(7.2px, 100vw*0.00315789473684211 + 5.93684210526316px, 12px);
    --dist-s: clamp(7.2px, 100vw*0.00315789473684211 + 5.93684210526316px, 12px);
    --dist-m: clamp(9.6px, 100vw*0.00421052631578947 + 7.91578947368421px, 16px);
    --dist-l: clamp(12px, 100vw*0.00526315789473684 + 9.89473684210526px, 20px);
    --dist-xl: clamp(16.8px, 100vw*0.00736842105263158 + 13.8526315789474px, 28px);
    --dist-xxl: clamp(24px, 100vw*0.0105263157894737 + 19.7894736842105px, 40px);

    --dist-0_25rem: clamp(2.4px, 100vw*0.00105263157894737 + 1.97894736842105px, 4px);
    --dist-0_625rem: clamp(6px, 100vw*0.00263157894736842 + 4.94736842105263px, 10px);
    --dist-1_5rem: clamp(14.4px, 100vw*0.00631578947368421 + 11.8736842105263px, 24px);
    --dist-2rem: clamp(24px, 100vw*0.0105263157894737 + 19.7894736842105px, 40px);
    --dist-3rem: clamp(28.8px, 100vw*0.0126315789473684 + 23.7473684210526px, 48px);
    --dist-3_5rem: clamp(33.6px, 100vw*0.0147368421052632 + 27.7052631578947px, 56px);
    --dist-4rem: clamp(38.4px, 100vw*0.0168421052631579 + 31.6631578947368px, 64px);
    --dist-7rem: clamp(67.2px, 100vw*0.0294736842105263 + 55.4105263157895px, 112px);
    --dist-8rem: clamp(76.8px, 100vw*0.0336842105263158 + 63.3263157894737px, 128px);
    --dist-23rem: clamp(220.8px, 100vw*0.0968421052631579 + 182.063157894737px, 368px);
    --dist-31_625rem: clamp(303.6px, 100vw*0.133157894736842 + 250.336842105263px, 506px);

    --dist-50rem: clamp(480px, 100vw*0.210526315789474 + 395.789473684211px, 800px);
    --dist-62_5rem: clamp(600px, 100vw*0.263157894736842 + 494.736842105263px, 1000px);

    --dist-40_percent: clamp(35%, 1vw + 32%, 40%);

    --font-size-xxl: clamp(33.6px, 100vw*0.0147368421052632 + 27.7052631578947px, 56px);
    --font-size-xl: clamp(28.8px, 100vw*0.0126315789473684 + 23.7473684210526px, 48px);
    --font-size-l: clamp(14.4px, 100vw*0.00631578947368421 + 11.8736842105263px, 24px);
    --font-size-m: clamp(9.6px, 100vw*0.00421052631578947 + 7.91578947368421px, 16px);
    --font-size-s: clamp(7.2px, 100vw*0.00315789473684211 + 5.93684210526316px, 12px);
}

.dark {
    --bg-dark: oklch(0.1 0 30);
    --bg: oklch(0.15 0 30);
    --bg-light: oklch(0.2 0 30);
    --text: oklch(0.96 0 30);
    --text-muted: oklch(0.76 0 30);
    --highlight: oklch(0.5 0 30);
    --border: oklch(0.4 0 30);
    --border-muted: oklch(0.3 0 30);
    --primary: oklch(0.76 0.2 30);
    --secondary: oklch(0.76 0.2 210);
    --danger: oklch(0.7 0.2 30);
    --warning: oklch(0.7 0.2 100);
    --success: oklch(0.7 0.2 160);
    --info: oklch(0.7 0.2 260);
}

.no-transition * {
    transition: none !important;
}