/* ============================================================
   SPTech24 — tokens.css
   Шрифты (self-hosted woff2), OKLCH-переменные, reset, база.
   Палитра: «Электрический янтарь» — bg #14110D / accent #F5A623 / ink #F5F2EC
   ============================================================ */

/* ---------- FONTS (self-hosted, cyr+lat subsets, swap) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/Inter-Regular-lat.woff2') format('woff2');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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/Inter-Regular-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/Inter-Medium-lat.woff2') format('woff2');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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/Inter-Medium-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/Inter-SemiBold-lat.woff2') format('woff2');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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/Inter-SemiBold-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/Inter-700-latin.woff2') format('woff2');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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/Inter-700-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../assets/fonts/Inter-800-latin.woff2') format('woff2');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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../assets/fonts/Inter-800-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/JetBrainsMono-Medium-lat.woff2') format('woff2');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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/JetBrainsMono-Medium-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/JetBrainsMono-Bold-lat.woff2') format('woff2');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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/JetBrainsMono-Bold-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}

/* ---------- TOKENS ---------- */
:root{
  /* surfaces — warm near-black ramp toward the brand hue (~70deg) */
  --bg:        oklch(0.165 0.012 68);   /* #14110D */
  --bg-1:      oklch(0.205 0.014 66);   /* раздел-альт */
  --surface:   oklch(0.235 0.016 64);   /* карточки */
  --surface-2: oklch(0.285 0.018 62);   /* hover/elevated */

  /* ink — warm off-white ramp */
  --ink:       oklch(0.965 0.010 88);   /* #F5F2EC */
  --ink-soft:  oklch(0.820 0.014 80);   /* вторичный текст (≈7:1 на bg) */
  --ink-dim:   oklch(0.680 0.016 76);   /* приглушённый (≈4.6:1 на bg) */
  --ink-faint: oklch(0.640 0.016 74);   /* подписи/мета — AA на тёмном фоне */

  /* accent — электрический янтарь */
  --accent:    oklch(0.785 0.158 68);   /* #F5A623 */
  --accent-hi: oklch(0.860 0.150 78);   /* свет/блик */
  --accent-dim:oklch(0.640 0.130 60);   /* нажатие */
  --accent-ink: oklch(0.190 0.040 60);  /* текст на янтаре (тёмный) */

  /* lines / glows */
  --line:      color-mix(in oklab, var(--ink) 12%, transparent);
  --line-2:    color-mix(in oklab, var(--ink) 7%, transparent);
  --glow:      color-mix(in oklab, var(--accent) 38%, transparent);

  /* type */
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* spacing rhythm */
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --gap: clamp(1rem, 2.5vw, 2rem);
  --sec: clamp(4.5rem, 9vw, 9rem);      /* вертикальный ритм секций */
  --maxw: 1240px;

  /* radii — единая шкала (мягкая) */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* motion */
  --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: linear(0,.2 8%,.48 16%,.8 26%,1.02 34%,1.06 42%,1.02 52%,1 62%);
  --t-fast: 160ms;
  --t-ui:   220ms;

  /* layering */
  --z-header: 100;
  --z-float:  200;
  --z-modal:  300;
  --z-cursor: 9999;

  color-scheme: dark;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{line-height:1.05;font-weight:800;letter-spacing:-0.02em;text-wrap:balance}
p{text-wrap:pretty}

/* ---------- UTILITIES ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.container--narrow{max-width:880px}
.mono{font-family:var(--mono);font-weight:500;letter-spacing:-0.01em;font-feature-settings:"tnum" 1}
.accent{color:var(--accent)}
.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}
.skip{position:absolute;left:-9999px;top:0;z-index:500;background:var(--accent);color:var(--accent-ink);padding:.6rem 1rem;border-radius:0 0 var(--r-sm) 0;font-weight:600}
.skip:focus{left:0}