/* ==========================================================================
   «Провод» — маркетплейс домашнего интернета
   Токены дизайн-системы. Собственная система, вдохновлённая структурой рынка,
   а не оформлением конкретного сайта.
   ========================================================================== */

/* ---------- Шрифты (локально) ---------- */
@font-face {
  font-family: 'Rubik';
  src: url('../assets/fonts/rubik-cyr.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Rubik';
  src: url('../assets/fonts/rubik-lat.woff2') format('woff2');
  font-weight: 400 700; 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;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/jbmono-cyr.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/jbmono-lat.woff2') format('woff2');
  font-weight: 400 600; 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;
}

/* ==========================================================================
   ПАЛИТРЫ  (переключаются атрибутом data-palette на <html>)
   Все цвета — в oklch, одинаковый характер светлоты/хромы внутри набора.
   ========================================================================== */

/* 1 — Синий сервиса. Профессиональная, доверительная.
       Насыщенный синий как brand, жёлтый только на промо. */
[data-palette='blue'] {
  --brand:        oklch(0.585 0.205 258);
  --brand-dark:   oklch(0.500 0.215 261);
  --brand-soft:   oklch(0.958 0.032 255);
  --brand-line:   oklch(0.882 0.062 256);
  --brand-ink:    #fff;
  --accent:       oklch(0.925 0.178 96);
  --accent-ink:   oklch(0.360 0.090 80);
  --ink:          oklch(0.225 0.018 260);
  --ink-2:        oklch(0.430 0.016 260);
  --muted:        oklch(0.575 0.014 260);
  --faint:        oklch(0.680 0.012 260);
  --line:         oklch(0.912 0.006 260);
  --line-2:       oklch(0.952 0.005 260);
  --bg:           oklch(0.968 0.005 260);
  --surface:      oklch(1 0 0);
  --canvas:       var(--surface);
  --canvas-band:  var(--band);
  --band:         oklch(0.938 0.026 250);
  --band-ink:     oklch(0.225 0.018 260);
  --pos:          oklch(0.600 0.155 152);
  --neg:          oklch(0.585 0.205 25);
  --grid-line:    oklch(0.585 0.205 258 / 0.08);
  --ph-a:         oklch(0.950 0.005 260);
  --ph-b:         oklch(0.918 0.008 260);
}

/* 2 — Серый и оранжевый. Холодный нейтральный фон, горячий CTA.
       Кнопки и интерактив — оранжевые; промо — мягкий янтарь.
       Весь сайт лежит на сплошном сером, белые только карточки. */
[data-palette='orange'] {
  --brand:        oklch(0.655 0.185 48);
  --brand-dark:   oklch(0.560 0.175 42);
  --brand-soft:   oklch(0.960 0.035 55);
  --brand-line:   oklch(0.885 0.070 50);
  --brand-ink:    #fff;
  --accent:       oklch(0.900 0.145 88);
  --accent-ink:   oklch(0.340 0.080 75);
  --ink:          oklch(0.230 0.010 260);
  --ink-2:        oklch(0.430 0.010 260);
  --muted:        oklch(0.570 0.008 260);
  --faint:        oklch(0.680 0.006 260);
  --line:         oklch(0.845 0.005 260);
  --line-2:       oklch(0.930 0.003 260);
  --bg:           oklch(0.885 0.005 260);
  --surface:      oklch(1 0 0);
  --canvas:       var(--bg);
  --canvas-band:  var(--bg);
  --band:         oklch(0.925 0.004 260);
  --band-ink:     oklch(0.230 0.010 260);
  --pos:          oklch(0.600 0.145 152);
  --neg:          oklch(0.585 0.200 25);
  --grid-line:    oklch(0.655 0.185 48 / 0.10);
  --ph-a:         oklch(0.945 0.004 260);
  --ph-b:         oklch(0.910 0.005 260);
}

/* 3 — Светло-серый и жёлтый. Воздушный нейтральный фон, янтарь как CTA.
       На кнопках тёмный текст — чистый лимон с белым не читается.
       Весь сайт лежит на сплошном сером, белые только карточки. */
[data-palette='yellow'] {
  --brand:        oklch(0.860 0.165 95);
  --brand-dark:   oklch(0.780 0.160 90);
  --brand-soft:   oklch(0.965 0.045 98);
  --brand-line:   oklch(0.900 0.090 95);
  --brand-ink:    oklch(0.280 0.050 75);
  --accent:       oklch(0.820 0.150 75);
  --accent-ink:   oklch(0.280 0.050 70);
  --ink:          oklch(0.240 0.010 260);
  --ink-2:        oklch(0.440 0.010 260);
  --muted:        oklch(0.580 0.008 260);
  --faint:        oklch(0.690 0.006 260);
  --line:         oklch(0.870 0.005 260);
  --line-2:       oklch(0.940 0.003 260);
  --bg:           oklch(0.920 0.004 260);
  --surface:      oklch(1 0 0);
  --canvas:       var(--bg);
  --canvas-band:  var(--bg);
  --band:         oklch(0.945 0.004 260);
  --band-ink:     oklch(0.240 0.010 260);
  --pos:          oklch(0.600 0.145 152);
  --neg:          oklch(0.585 0.200 25);
  --grid-line:    oklch(0.860 0.165 95 / 0.14);
  --ph-a:         oklch(0.955 0.004 260);
  --ph-b:         oklch(0.922 0.005 260);
}

/* ==========================================================================
   ФОРМА  (data-radius, data-shadow)
   ========================================================================== */
[data-radius='soft'] {
  --r-card: 22px; --r-panel: 28px; --r-control: 14px;
  --r-chip: 999px; --r-inner: 12px; --r-btn: 999px;
}
[data-radius='standard'] {
  --r-card: 16px; --r-panel: 24px; --r-control: 12px;
  --r-chip: 999px; --r-inner: 10px; --r-btn: 999px;
}
[data-radius='strict'] {
  --r-card: 3px; --r-panel: 4px; --r-control: 3px;
  --r-chip: 3px; --r-inner: 3px; --r-btn: 3px;
}

[data-shadow='soft'] {
  --sh-card:  0 1px 4px oklch(0.225 0.018 260 / 0.08);
  --sh-panel: 0 4px 18px -4px oklch(0.225 0.018 260 / 0.12);
  --sh-pop:   0 12px 40px -10px oklch(0.225 0.018 260 / 0.22);
  --card-border: 0px solid transparent;
}
[data-shadow='hairline'] {
  --sh-card: none; --sh-panel: none; --sh-pop: 0 10px 30px -8px oklch(0.2 0.02 268 / 0.18);
  --card-border: 1px solid var(--line);
}

/* ==========================================================================
   ПЛОТНОСТЬ  (data-density)
   ========================================================================== */
[data-density='compact']  { --sp-sec: 64px;  --sp-sec-sm: 40px; --pad-card: 18px; --gap: 16px; --gap-sm: 10px; }
[data-density='normal']   { --sp-sec: 96px;  --sp-sec-sm: 56px; --pad-card: 24px; --gap: 24px; --gap-sm: 14px; }
[data-density='airy']     { --sp-sec: 132px; --sp-sec-sm: 72px; --pad-card: 32px; --gap: 32px; --gap-sm: 18px; }

/* ==========================================================================
   ТИПОГРАФИКА
   ========================================================================== */
:root {
  --font-sans: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  --font-num: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-display: 700 56px/1.08 var(--font-sans);
  --t-h1:      700 42px/1.14 var(--font-sans);
  --t-h2:      700 32px/1.2 var(--font-sans);
  --t-h3:      700 24px/1.28 var(--font-sans);
  --t-h4:      600 19px/1.35 var(--font-sans);
  --t-body:    400 17px/1.5 var(--font-sans);
  --t-body-s:  400 15px/1.5 var(--font-sans);
  --t-small:   400 14px/1.45 var(--font-sans);
  --t-mono:    500 12.5px/1.4 var(--font-sans);
  --t-num:     500 19px/1.3 var(--font-num);
}

/* ==========================================================================
   БАЗА
   ========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* --- утилиты --- */
.container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 32px; }
.container--narrow { max-width: 880px; }
.mono { font: var(--t-mono); letter-spacing: 0.09em; text-transform: uppercase; }
.num { font: var(--t-num); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
.pretty { text-wrap: pretty; }
.balance { text-wrap: balance; }
.rule { height: 1px; background: var(--line); border: 0; }
.muted { color: var(--muted); }
.ink2 { color: var(--ink-2); }

/* --- техническая сетка (фирменная деталь hero) --- */
.tech-grid {
  position: absolute; top: 0; left: 0; right: 0; height: 520px;
  pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(125% 95% at 50% 0%, transparent 28%, var(--canvas) 88%),
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 100% 100%, 76px 76px, 76px 76px;
  background-repeat: no-repeat, repeat, repeat;
}
.tech-grid--fine {
  background-size: 100% 100%, 38px 38px, 38px 38px;
}

/* --- плейсхолдер под реальные материалы --- */
.ph {
  background-image: repeating-linear-gradient(
    135deg, var(--ph-a) 0 7px, var(--ph-b) 7px 14px
  );
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--faint); text-align: center; padding: 12px;
}
.ph__label { font: 400 11.5px/1.45 var(--font-mono); letter-spacing: 0.04em; max-width: 22ch; }

/* --- скроллбар --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--faint); }

@media print { .no-print { display: none !important; } }