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

:root {
    color-scheme: light;
    /* color-scheme: light dark; */
}

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

/* Main Paragraph Body: Map Regular No. 2 to weight 400 */
@font-face {
  font-family: 'Lyon Custom';
  src: url('/fonts/LyonTextWeb-RegularNoTwo.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Paragraph Italics: Map Regular No. 2 Italic to weight 400 + italic */
@font-face {
  font-family: 'Lyon Custom';
  src: url('/fonts/LyonTextWeb-RegularNoTwoItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Article Headings: Map the ultra-heavy Display Black cut to weight 900 */
@font-face {
  font-family: 'Lyon Custom Headings';
  src: url('/fonts/LyonDisplayWeb-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Wide grotesque for pull-quote emphasis: Archivo variable (OFL, see /fonts/Archivo-OFL.txt), width 62-125%, weight 100-900 */
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/ArchivoVariable-LatinExt.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/ArchivoVariable-Latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

    --font-family-san-serif: ui-sans-serif, "Inter", system-ui, sans-serif;
    --font-family-serif: 'Lyon Custom', Georgia, Charter, serif;
    --font-family-wide-grotesque: 'Archivo', ui-sans-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;

    /* The site's one extrusion, shared by display titles (text and SVG logos) and the dark
       floated cards. Apply it with `filter`, never box-shadow or text-shadow, so everything
       rounds the same way: chained drop-shadows compound into four gray layers, and the soft
       shadow falls from the extruded shape. Steps are whole pixels because browsers round each
       drop-shadow offset down to device pixels (0.06rem = 0.96px steps render as nothing); on
       125%/150% scaling the depth is a little shallower, but identically so everywhere. */
    --extrusion:
        drop-shadow(1px 1px 0.02rem #919191)
        drop-shadow(1px 1px 0.02rem #919191)
        drop-shadow(1px 1px 0.02rem #919191)
        drop-shadow(1px 1px 0.02rem #919191)
        drop-shadow(0.3rem 0.3rem 0.8rem rgb(60 60 60 / 0.3));

    /* 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);
    }
}
*/