/* Variables - CSS custom properties for spacing, typography, and design tokens */

:root {
    color-scheme: light dark;
}

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

:root {
    --color-background: light-dark(var(--uchu-yang), var(--uchu-yin-8));
    --color-foreground: light-dark(var(--uchu-yin-8), var(--uchu-yang));
    --color-foreground-inverse: light-dark(var(--uchu-yang), var(--uchu-yin-8));
    --color-muted: light-dark(#555555, #d0d0d0);
    --color-border: light-dark(#d0d0d0, #404040);
    --color-surface: light-dark(#f2f2f2, #1f1f1f);
    --color-surface-alt: light-dark(#f7f7f7, #252525);
    --color-primary: light-dark(var(--uchu-green-5), oklch(68% 0.18 145));
    --color-hyperlinks: light-dark(var(--uchu-green-9), oklch(78% 0.13 145));
    --color-background-footer: light-dark(#333333, #111111);
    --color-title: light-dark(#222222, #f5f5f5);

    --font-family-san-serif: system-ui, sans-serif;
    --font-family-serif: "miller-text", Charter, serif;
}

:root {
    --grid-max-width: 65ch;
    --grid-gutter: var(--space-s-l, clamp(1rem, 0.5625rem + 2.5vw, 2.5rem));
    --grid-columns: 12;
}

:root {
    --space-3xs: clamp(0.25rem, 0.2318rem + 0.1042vw, 0.3125rem);
    --space-2xs: clamp(0.5rem, 0.4635rem + 0.2083vw, 0.625rem);
    --space-xs: clamp(0.75rem, 0.6953rem + 0.3125vw, 0.9375rem);
    --space-s: clamp(1rem, 0.9271rem + 0.4167vw, 1.25rem);
    --space-m: clamp(1.5rem, 1.3906rem + 0.625vw, 1.875rem);
    --space-l: clamp(2rem, 1.8542rem + 0.8333vw, 2.5rem);
    --space-xl: clamp(3rem, 2.7813rem + 1.25vw, 3.75rem);
    --space-2xl: clamp(4rem, 3.7083rem + 1.6667vw, 5rem);
    --space-3xl: clamp(6rem, 5.5625rem + 2.5vw, 7.5rem);
    /* One-up pairs */
    --space-3xs-2xs: clamp(0.25rem, 0.1406rem + 0.625vw, 0.625rem);
    --space-2xs-xs: clamp(0.5rem, 0.3724rem + 0.7292vw, 0.9375rem);
    --space-xs-s: clamp(0.75rem, 0.6042rem + 0.8333vw, 1.25rem);
    --space-s-m: clamp(1rem, 0.7448rem + 1.4583vw, 1.875rem);
    --space-m-l: clamp(1.5rem, 1.2083rem + 1.6667vw, 2.5rem);
    --space-l-xl: clamp(2rem, 1.4896rem + 2.9167vw, 3.75rem);
    --space-xl-2xl: clamp(3rem, 2.4167rem + 3.3333vw, 5rem);
    --space-2xl-3xl: clamp(4rem, 2.9792rem + 5.8333vw, 7.5rem);
    /* Custom pairs */
    --space-s-l: clamp(1rem, 0.5625rem + 2.5vw, 2.5rem);
}

:root {
    --step--2: clamp(0.6944rem, 0.6508rem + 0.2495vw, 0.8442rem);
    --step--1: clamp(0.8333rem, 0.7482rem + 0.4866vw, 1.1253rem);
    --step-0: clamp(1rem, 0.8542rem + 0.8333vw, 1.5rem);
    --step-1: clamp(1.2rem, 0.9668rem + 1.3325vw, 1.9995rem);
    --step-2: clamp(1.44rem, 1.0826rem + 2.0422vw, 2.6653rem);
    --step-3: clamp(1.728rem, 1.1957rem + 3.0415vw, 3.5529rem);
    --step-4: clamp(2.0736rem, 1.2971rem + 4.4373vw, 4.736rem);
    --step-5: clamp(2.4883rem, 1.3728rem + 6.3746vw, 6.3131rem);
    --step-6: clamp(2.986rem, 1.4024rem + 9.0489vw, 8.4153rem);
}

:root {
    --md-surface: #fefbff;
    --md-surface-container-highest: #e6e1e5;
    --md-on-surface: #1c1b1f;
    --md-on-surface-variant: #49454f;
    --md-outline-variant: #cac4d0;
    --md-primary: #6750a4;

    /* Component tokens */
    --state-hover: .08;
    --state-focus: .12;
    --shape-xs: 4px;
    --gap: var(--space-s);
    --indicator-rest: 1px;
    --indicator-active: 2px;
    --ring-size: 3px;
    --ease: cubic-bezier(.4, 0, .2, 1);
    --dur: 150ms;
    --field-size: clamp(3.5rem, 2cqi + 3.25rem, 4rem);
    --label-space: 1.65rem;

    /* Radio Specific Tokens */
    --radio-radius: 12px;
    --radio-gutter: 16px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --md-surface: #1c1b1f;
        --md-surface-container-highest: #36343b;
        --md-on-surface: #e6e1e5;
        --md-on-surface-variant: #cac4d0;
        --md-outline-variant: #938f99;
        --md-primary: #d0bcff;
    }

    select, option {
        background-color: var(--md-surface);
        color: var(--md-on-surface);
    }

    .md-clear-btn:hover {
        background-color: rgba(255,255,255,0.1);
    }
}