/* ==========================================================================
Rilbox — токени стилю (основа: макет «варіант 1 · Конструктор», 09.11.2026)
Один файл для головної, шаблонів і конструктора /box/.
Підключення:
Тема: ; без атрибута — за системною темою.
========================================================================== */
/* ---------- 1. Кольори: світла тема ---------- */
:root{
--rb-bg: #FFFFFF; /* тло сторінки */
--rb-surface: #F5F4F1; /* тло карток, превʼю, полів */
--rb-surface-2: #ECEAE5; /* наведення на поверхні */
--rb-fg: #141517; /* основний текст, графіт */
--rb-mute: #5E5F63; /* вторинний текст (контраст 6,4 на тлі) */
--rb-dim: #67686D; /* підписи, підказки (5,6 на тлі, 5,0 на surface) */
--rb-line: #E4E2DE; /* лінії, межі */
--rb-line-strong: #CFCCC6; /* межі полів, доріжка повзунка при наведенні */
--rb-accent: #FF530D; /* фірмовий помаранчевий: тло кнопки, знак логотипа */
--rb-on-accent: #17130F; /* текст на помаранчевому (5,6) */
--rb-accent-text: #BF3A07; /* помаранчевий ТЕКСТ на світлому (5,5 на тлі, 5,0 на surface) */
--rb-accent-soft: #FFE8DD; /* легка помаранчева підкладка */
/* «таблетка» (chip) */
--rb-pill-fg: var(--rb-mute);
--rb-pill-bg: transparent;
--rb-pill-hover-fg: var(--rb-fg);
--rb-pill-on-fg: var(--rb-bg);
--rb-pill-on-bg: var(--rb-fg);
/* 3D-сцена */
--rb-dim-line: #8A8B90; /* розмірні лінії */
--rb-dim-text: #141517; /* цифри розмірів (обвідка = --rb-bg) */
--rb-focus: var(--rb-accent);
--rb-shadow-1: 0 1px 2px rgba(20,21,23,.06), 0 4px 16px rgba(20,21,23,.06);
--rb-shadow-2: 0 10px 40px rgba(20,21,23,.12);
color-scheme: light;
}
/* ---------- 2. Кольори: темна тема (глибокий графіт) ---------- */
:root[data-theme="dark"]{
--rb-bg:#14161A; --rb-surface:#1B1E23; --rb-surface-2:#23272D;
--rb-fg:#EEEDEA; --rb-mute:#A4A7AE; --rb-dim:#8C9098; --rb-line:#2A2E35; --rb-line-strong:#3A3F47;
--rb-on-accent:#17130F; --rb-accent-text:#FF6A2B; --rb-accent-soft:#3A2116;
--rb-dim-line:#7D828B; --rb-dim-text:#EEEDEA;
--rb-shadow-1:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
--rb-shadow-2:0 10px 40px rgba(0,0,0,.45);
color-scheme: dark;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme]){
--rb-bg:#14161A; --rb-surface:#1B1E23; --rb-surface-2:#23272D;
--rb-fg:#EEEDEA; --rb-mute:#A4A7AE; --rb-dim:#8C9098; --rb-line:#2A2E35; --rb-line-strong:#3A3F47;
--rb-on-accent:#17130F; --rb-accent-text:#FF6A2B; --rb-accent-soft:#3A2116;
--rb-dim-line:#7D828B; --rb-dim-text:#EEEDEA;
--rb-shadow-1:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
--rb-shadow-2:0 10px 40px rgba(0,0,0,.45);
color-scheme: dark; } }
/* ---------- 3. Шрифти (файли woff2 — assets/fonts/, правила — fonts.css) ----------
Geologica 300–600 — заголовки (h1 300, h2 300, h3 400)
Golos Text 400–600 — текст, кнопки, інтерфейс
JetBrains Mono 400–500 — цифри: розміри, ціна, мм
Jost 400 (лише літери RILBOX) — словесний знак логотипа */
:root{
--rb-f-display: "Geologica", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--rb-f-body: "Golos Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--rb-f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--rb-f-logo: "Jost", "Geologica", ui-sans-serif, system-ui, sans-serif;
/* розміри тексту */
--rb-t-hero: clamp(42px, 6.4vw, 80px); /* h1 головної */
--rb-t-h1: clamp(36px, 5vw, 64px); /* h1 внутрішніх */
--rb-t-h2: clamp(28px, 3.6vw, 46px);
--rb-t-h3: 21px;
--rb-t-lead: 18px; /* підзаголовок */
--rb-t-body: 16px;
--rb-t-small: 14px;
--rb-t-label: 12px; /* ПІДПИСИ ВЕРХНІМ РЕГІСТРОМ, letter-spacing .06em */
--rb-t-num: 22px; /* цифри в рядку параметрів */
--rb-t-num-sm: 13px; /* цифри розмірних ліній */
--rb-lh-tight: 1.0; --rb-lh-head: 1.12; --rb-lh-body: 1.55;
--rb-track-head: -0.035em; --rb-track-label: .06em;
/* відступи (крок 4) і сітка */
--rb-s1:4px; --rb-s2:8px; --rb-s3:12px; --rb-s4:16px; --rb-s5:24px; --rb-s6:32px; --rb-s7:48px; --rb-s8:72px; --rb-s9:120px;
--rb-section: clamp(72px, 10vw, 128px); /* між секціями */
--rb-maxw: 1200px; --rb-maxw-text: 720px;
--rb-gutter-l: max(16px, env(safe-area-inset-left, 0px));
--rb-gutter-r: max(16px, env(safe-area-inset-right, 0px));
/* радіуси */
--rb-r-sm:6px; --rb-r-md:12px; --rb-r-lg:20px; --rb-r-pill:999px;
/* повзунок */
--rb-range-track: 2px; --rb-range-thumb: 18px;
/* рух */
--rb-ease: cubic-bezier(.2,.7,.2,1); --rb-dur: .18s;
}
/* ---------- 4. База ---------- */
*{box-sizing:border-box}
html,body{margin:0;background:var(--rb-bg);color:var(--rb-fg)}
body{font:400 var(--rb-t-body)/var(--rb-lh-body) var(--rb-f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--rb-focus);outline-offset:3px;border-radius:var(--rb-r-sm)}
.rb-wrap{max-width:var(--rb-maxw);margin:0 auto;padding-left:var(--rb-gutter-l);padding-right:var(--rb-gutter-r)}
.rb-num{font-family:var(--rb-f-mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.rb-label{font-size:var(--rb-t-label);letter-spacing:var(--rb-track-label);text-transform:uppercase;color:var(--rb-mute)}
.rb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rb-sr:focus{position:fixed;left:max(8px, env(safe-area-inset-left, 0px));top:calc(8px + env(safe-area-inset-top, 0px));width:auto;height:auto;clip:auto;overflow:visible;padding:10px 14px;background:var(--rb-bg);color:var(--rb-fg);border:1px solid var(--rb-line-strong);border-radius:var(--rb-r-md);z-index:40}
/* ---------- 5. Компоненти ---------- */
/* Логотип: знак + слово */
.rb-logo{display:inline-flex;align-items:center;gap:10px;font:400 22px/1 var(--rb-f-logo);letter-spacing:.03em;text-decoration:none;color:var(--rb-fg);flex:none}
.rb-logo svg{width:28px;height:28px;flex:none}
/* Кнопки: основна (помаранчева) і вторинна (контурна) */
.rb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--rb-r-pill);padding:13px 22px;
font:600 15px/1.1 var(--rb-f-body);white-space:nowrap;text-decoration:none;border:1px solid transparent;
transition:filter var(--rb-dur),background var(--rb-dur),transform var(--rb-dur)}
.rb-btn svg{width:16px;height:16px;flex:none}
.rb-btn--primary{background:var(--rb-accent);color:var(--rb-on-accent)}
.rb-btn--primary:hover{filter:brightness(1.07)}
.rb-btn--secondary{background:transparent;color:var(--rb-fg);border-color:var(--rb-line-strong)}
.rb-btn--secondary:hover{background:var(--rb-surface)}
.rb-btn--sm{padding:10px 16px;font-size:14px}
.rb-btn:active{transform:translateY(1px)}
/* «Таблетки» — вибір одного з варіантів (aria-pressed) */
.rb-pills{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
.rb-pill{border:0;background:var(--rb-pill-bg);color:var(--rb-pill-fg);padding:7px 12px;border-radius:var(--rb-r-pill);font-size:var(--rb-t-small);transition:background var(--rb-dur),color var(--rb-dur)}
.rb-pill:hover{color:var(--rb-pill-hover-fg)}
.rb-pill[aria-pressed="true"]{background:var(--rb-pill-on-bg);color:var(--rb-pill-on-fg)}
/* Повзунок */
.rb-range{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:6px 0 0;cursor:pointer}
.rb-range::-webkit-slider-runnable-track{height:var(--rb-range-track);background:var(--rb-line);border-radius:2px}
.rb-range::-moz-range-track{height:var(--rb-range-track);background:var(--rb-line);border-radius:2px}
.rb-range:hover::-webkit-slider-runnable-track{background:var(--rb-line-strong)}
.rb-range::-webkit-slider-thumb{-webkit-appearance:none;width:var(--rb-range-thumb);height:var(--rb-range-thumb);border-radius:50%;background:var(--rb-fg);margin-top:-8px;border:3px solid var(--rb-bg);box-shadow:0 0 0 1px var(--rb-fg)}
.rb-range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--rb-fg);border:3px solid var(--rb-bg);box-shadow:0 0 0 1px var(--rb-fg)}
/* Рядок параметрів: підпис зліва, цифра моноширинним справа */
.rb-param{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rb-param output,.rb-param .v{font:400 var(--rb-t-num)/1 var(--rb-f-mono);color:var(--rb-fg);font-variant-numeric:tabular-nums}
.rb-param small{font:400 12px var(--rb-f-body);color:var(--rb-mute);margin-left:3px}
/* Посилання зі стрілкою */
.rb-link{display:inline-flex;gap:6px;align-items:center;font-weight:500;font-size:var(--rb-t-small);text-decoration:none;border-bottom:1px solid var(--rb-line-strong);padding-bottom:2px}
.rb-link:hover{border-bottom-color:var(--rb-accent)}
.rb-link svg{width:14px;height:14px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}