/**
 * Design tokens and the base layer.
 *
 * Holds the self hosted fonts, every colour token in four themes, the type
 * scale and the reset. Nothing here paints a component: a value that appears
 * only in one place belongs to the file that uses it.
 *
 * A token declared in one theme but not the others breaks that theme.
 */

/* ----------------------------------------------------------------------------
   1. FONTS
   Self hosted. Cyrillic is required: without it Russian text falls back to a
   system font and the page ends up with two typefaces.
   ------------------------------------------------------------------------- */
@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/onest-v9-cyrillic_latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/onest-v9-cyrillic_latin-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/onest-v9-cyrillic_latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-v24-cyrillic_latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-v24-cyrillic_latin-500.woff2') format('woff2');
}

/* ----------------------------------------------------------------------------
   2. TOKENS
   All colours in oklch: lightness / chroma / hue. Hue 180-205 is the project
   palette. Every token is declared in all four themes, or a theme breaks.
   ------------------------------------------------------------------------- */
:root {
    /* surfaces */
    --canvas: oklch(0.988 0.005 100);
    /* page canvas */
    --raise: oklch(0.968 0.007 100);
    /* raised band, footer, fields */
    --line: oklch(0.902 0.009 100);
    /* visible border */
    --line-soft: oklch(0.940 0.008 100);
    /* border inside a group */
    /* text */
    --ink: oklch(0.255 0.012 180);
    /* primary */
    --ink-2: oklch(0.430 0.012 180);
    /* secondary */
    --title: oklch(0.335 0.048 205);
    /* page names and section headings */
    --muted: oklch(0.512 0.012 180);
    /* descriptions and captions */
    /* accent */
    --accent: oklch(0.470 0.085 190);
    /* links, icons, active state */
    --accent-soft: oklch(0.955 0.020 190);
    /* hover highlight */
    /* tone band: hero and pre footer */
    --tone: oklch(0.318 0.045 195);
    --tone-ink: oklch(0.972 0.006 190);
    --tone-muted: oklch(0.800 0.016 190);
    --tone-line: oklch(0.420 0.038 195);
    --tone-accent: oklch(0.820 0.090 190);
    /* shadows: tokens only, literals fail on a dark canvas */
    --shadow: 0 8px 24px oklch(0.2 0.02 200 / 0.14);
    --shadow-inset: inset 0 1px 2px oklch(0.2 0.02 200 / 0.12);
    /* type scale. base 16, a value outside the scale is a defect */
    --fs-quiet: 12px;
    /* small caps labels */
    --fs-functional: 14px;
    /* helper captions, mono marks */
    --fs-base: 16px;
    /* all body text */
    --fs-lead: 20px;
    /* hero lede, card title */
    --fs-heading: 32px;
    /* section headings */
    --fs-display: 72px;
    /* h1 display corridor, 4.5x base */
    --fs-poster: 32px;
    /* code line in the pre footer band */
    /* line height steps */
    --lh-display: 1.02;
    --lh-heading: 1.2;
    --lh-lead: 1.3;
    --lh-ui: 1.5;
    --lh-prose: 1.7;
    /* geometry */
    --pad: 20px;
    /* page side padding */
    --gap-head: 8px;
    /* gap between header items */
    --sec: 44px;
    /* vertical section step */
    --maxw: 1080px;
    /* content width */
    --tap: 44px;
    /* minimum tap target */
    --icon: 20px;
    /* icon in a list row */
    --icon-section: 46px;
    /* section heading icon */
    --r-control: 3px;
    /* control radius */
    --r-surface: 4px;
    /* surface radius */
    /* layout, overridden in media queries */
    --cols-footer: 1fr;
    --cols-hero: 1fr;
    /* hero: prose | routes card */
    --cols-row: 1fr;
    /* list row: title | description */
    --row-desc-align: left;
    --row-desc-indent: 30px;
    --hero-card-lift: 0px;
    /* routes card lift above the prose */
    /* visibility per screen size */
    --show-search-field: none;
    /* search field in the header */
    --show-search-button: inline-flex;
    --show-theme-header: none;
    /* theme switch in the header */
    --show-theme-drawer: flex;
    /* the same switch inside the drawer */
    --show-search-drawer: block;
    /* search field inside the drawer */;
}

/* PHONE. Base values above, no media query needed, mobile first.
Scrollbars hidden: the phone shows a floating indicator anyway. */
@media (max-width: 767px) {
    html {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    html::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .drawer__body {
        scrollbar-width: none;
    }
    .drawer__body::-webkit-scrollbar {
        width: 0;
    }
}

/* TABLET from 768px. Search field and theme switch appear in the header,
a list row splits into two columns, the footer into two.
The hero stays single column: the card sits under the prose. */
@media (min-width: 768px) {
    :root {
        --pad: 32px;
        --gap-head: 12px;
        --sec: 64px;
        --fs-display: 96px;
        --fs-poster: 44px;
        --icon-section: 52px;
        --cols-footer: 1fr 1fr;
        --cols-row: minmax(0, 264px) minmax(0, 1fr);
        --row-desc-indent: 0px;
        --show-search-field: flex;
        --show-search-button: none;
        --show-theme-header: flex;
        --show-theme-drawer: none;
        --show-search-drawer: none;
    }
}

/* DESKTOP from 1200px. The hero becomes two columns, the routes card
lifts by 94px, row descriptions align right,
the footer takes four columns, tap target drops to 36px for a mouse. */
@media (min-width: 1200px) {
    :root {
        --pad: 40px;
        --sec: 80px;
        --tap: 36px;
        --cols-footer: 1fr 1fr 1fr 1fr;
        --cols-hero: minmax(0, 7fr) minmax(0, 5fr);
        --cols-row: minmax(0, 326px) minmax(0, 1fr);
        --row-desc-align: right;
        --hero-card-lift: 94px;
    }
}

/* Dark theme, picked by hand */
:root[data-theme="dark"] {
    --canvas: oklch(0.196 0.012 200);
    --raise: oklch(0.238 0.013 200);
    --line: oklch(0.320 0.014 200);
    --line-soft: oklch(0.268 0.013 200);
    --ink: oklch(0.945 0.006 180);
    --ink-2: oklch(0.805 0.008 180);
    --title: oklch(0.905 0.028 200);
    --muted: oklch(0.660 0.010 180);
    --accent: oklch(0.780 0.085 190);
    --accent-soft: oklch(0.290 0.030 190);
    --tone: oklch(0.262 0.030 200);
    --tone-ink: oklch(0.955 0.006 190);
    --tone-muted: oklch(0.775 0.014 190);
    --tone-line: oklch(0.345 0.026 200);
    --tone-accent: oklch(0.800 0.090 190);
    --shadow: 0 10px 28px oklch(0.10 0.01 200 / 0.55);
    --shadow-inset: inset 0 1px 2px oklch(0.10 0.01 200 / 0.45);
}

/* Dark theme, following the system */
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        --canvas: oklch(0.196 0.012 200);
        --raise: oklch(0.238 0.013 200);
        --line: oklch(0.320 0.014 200);
        --line-soft: oklch(0.268 0.013 200);
        --ink: oklch(0.945 0.006 180);
        --ink-2: oklch(0.805 0.008 180);
        --title: oklch(0.905 0.028 200);
        --muted: oklch(0.660 0.010 180);
        --accent: oklch(0.780 0.085 190);
        --accent-soft: oklch(0.290 0.030 190);
        --tone: oklch(0.262 0.030 200);
        --tone-ink: oklch(0.955 0.006 190);
        --tone-muted: oklch(0.775 0.014 190);
        --tone-line: oklch(0.345 0.026 200);
        --tone-accent: oklch(0.800 0.090 190);
        --shadow: 0 10px 28px oklch(0.10 0.01 200 / 0.55);
        --shadow-inset: inset 0 1px 2px oklch(0.10 0.01 200 / 0.45);
    }
}

/* Smoky blue: a third light theme, hue 258-266 */
:root[data-theme="warm"] {
    --canvas: oklch(0.968 0.013 258);
    --raise: oklch(0.941 0.018 258);
    --line: oklch(0.874 0.024 258);
    --line-soft: oklch(0.911 0.020 258);
    --ink: oklch(0.288 0.042 262);
    --ink-2: oklch(0.448 0.036 262);
    --title: oklch(0.362 0.068 264);
    --muted: oklch(0.498 0.030 260);
    --accent: oklch(0.508 0.124 266);
    --accent-soft: oklch(0.928 0.032 262);
    --tone: oklch(0.336 0.058 264);
    --tone-ink: oklch(0.970 0.012 260);
    --tone-muted: oklch(0.808 0.024 260);
    --tone-line: oklch(0.436 0.048 264);
    --tone-accent: oklch(0.834 0.102 266);
    --shadow: 0 8px 24px oklch(0.28 0.04 262 / 0.16);
    --shadow-inset: inset 0 1px 2px oklch(0.28 0.04 262 / 0.14);
}

/* ----------------------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
}

/* Must beat any display rule, the drawer is hidden by this attribute. */
[hidden] {
    display: none !important;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--canvas);
}

body {
    font-family: Onest, -apple-system, Helvetica, sans-serif;
    font-size: var(--fs-base);
    line-height: var(--lh-ui);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2 {
    margin: 0;
    font-weight: 600;
}

p {
    margin: 0;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

input, button, select, textarea {
    font: inherit;
    color: inherit;
}

input::placeholder {
    color: var(--muted);
    opacity: 1;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--r-control);
}

::selection {
    background: var(--accent-soft);
    color: var(--ink);
}

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding-inline: var(--pad);
}

.mono {
    font-family: 'JetBrains Mono', monospace;
}

.label {
    /* small caps section label */
    font-size: var(--fs-quiet);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Screen reader only. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}