/* okitoki-v4 — design tokens (layer 0).
 * Source: Pavlo's facelift mock-up (dist.lucifer-v2, v-components.css, 2026-08-24).
 * The only file with literal colours, sizes and durations; every other file reads these
 * variables. Colours stay RGB triplets as in the mock-up, so `rgb(var(--x))` and
 * `rgba(var(--x), .15)` both work. Deviations from the mock-up are marked "v4:". */

@font-face {
    /* v4: the mock-up registered this face under the name "Arial", which silently
       replaced real Arial for every other stylesheet on the page. */
    font-family: 'Arial Rounded MT Pro Cyr';
    src: url('../fonts/ArialRoundedMTProCyr.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Arial Rounded MT Pro Cyr';
    src: url('../fonts/ArialRoundedMTProCyr-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Colours (RGB triplets) */
    --v-color-white: 255, 255, 255;
    --v-color-black: 0, 0, 0;
    --v-color-primary: 96, 128, 208;
    --v-color-accent: 248, 125, 77;
    --v-color-success: 22, 163, 74;
    --v-color-danger: 244, 63, 94;          /* v4: was a bare #f43f5e in the form errors */
    --v-color-text: 47, 57, 70;
    --v-color-text-secondary: 110, 120, 135;
    --v-color-surface: 255, 255, 255;
    --v-color-surface-contrast: 242, 242, 242;
    --v-color-border: 242, 242, 242;
    --v-color-border-element: 220, 220, 220;
    --v-color-footer: 43, 54, 67;           /* v4: current site footer, kept by decision */
    --v-color-teal: 24, 208, 205;           /* v4: current site teal, kept for the contacts header (2026-10-04) */

    /* Spacing */
    --v-space-xs: 6px;
    --v-space-sm: 12px;
    --v-space-md: 15px;
    --v-space-lg: 30px;
    --v-space-xl: 45px;
    --v-space-2xl: 60px;
    --v-space-3xl: 120px;
    --v-space-4xl: 200px;
    --v-space: var(--v-space-md);

    /* Typography */
    --v-font-family: 'Arial Rounded MT Pro Cyr', Arial, Helvetica, sans-serif;
    --v-font-weight: 400;
    /* v4: the mock-up uses 500/600/800 but only 400/700 files exist; weights are
       tokens so the real files (when Pavlo sends them) drop in without touching
       components. Until then 500 -> 400 and 600/800 -> 700. */
    --v-font-weight-medium: 400;
    --v-font-weight-semibold: 700;
    --v-font-weight-bold: 700;
    --v-font-weight-heavy: 700;
    --v-font-line-height: 1.6;
    --v-font-line-height-heading: 1.3;
    --v-font-size-xs: 12px;
    --v-font-size-sm: 14px;
    --v-font-size-md: 16px;
    /* v4: fluid between 375px and 1200px; the mock-up kept desktop sizes on phones. */
    --v-font-size-lg: clamp(21px, 1.6vw + 15px, 25px);
    --v-font-size-xl: clamp(26px, 2.2vw + 18px, 35px);
    --v-font-size-2xl: clamp(34px, 3.4vw + 21px, 48px);
    --v-font-size: var(--v-font-size-md);

    /* Shape */
    --v-radius-sm: 5px;
    --v-radius-md: 10px;
    --v-radius-lg: 16px;
    --v-radius: var(--v-radius-md);
    --v-radius-pill: 999px;
    --v-shadow: 0 0 12px rgba(var(--v-color-black), .08);

    /* Motion */
    --v-duration: .15s;
    --v-duration-fast: .1s;
    --v-duration-long: .3s;
    --v-timing: ease-out;

    /* Layout */
    --v-header-height: 64px;               /* v4: one value, the mock-up declared it 3x */
    --v-container-sm: 540px;
    --v-container-md: 720px;
    --v-container-lg: 960px;
    --v-container-xl: 1140px;
    --v-container-xxl: 1340px;
    /* v4: vertical rhythm between sections, fluid; the mock-up kept 155px on phones. */
    --v-section-gap: clamp(60px, 9vw, 155px);
    --v-z-header: 1000;
    --v-z-modal: 1100;

    /* Focus ring (v4: the mock-up had none) */
    --v-focus-ring: 0 0 0 3px rgba(var(--v-color-primary), .45);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --v-duration: 0s;
        --v-duration-fast: 0s;
        --v-duration-long: 0s;
    }
}