@layer tokens, base, components, page;
/* Токены (DESIGN.md §3): палитра, шрифты, отступы, лист, линии, движение; бюджет 4 КБ */
@layer tokens {
:root{color-scheme:dark;
/* синька */
--desk:#050F1E;--sheet:#0A2342;--sheet-2:#0E2D52;--grid:#16406E;--grid-fine:#102F55;--rule:#2A5A8C;--line:#CFE6FF;
--ink:#EEF6FF;--ink-2:#9FBCDB;--cyan:#8CE2FF;--hidden:#5E84AE;--signal:#F4A53C;--alarm:#FF5B4F;--alarm-text:#FF8A80;
/* калька и печать */
--kalka:#E6EDF1;--kalka-ink:#0B2748;--kalka-ink-2:#34506F;--kalka-line:#6F8CA8;--kalka-link:#1D5E99;--kalka-alarm:#B3261E;
/* холсты 3D */
--wire-line:var(--line);--wire-hidden:var(--hidden);--wire-hi:var(--cyan);--wire-signal:var(--signal);--wire-alarm:var(--alarm);
/* шрифты; ширина: semi-condensed 87,5 %, condensed 75 %, semi-expanded 112,5 % */
--font-sans:"Geologica","Geologica Fallback",sans-serif;
--font-mono:"Martian Mono","Martian Fallback",ui-monospace,monospace;
--f-mono:semi-condensed 450 13px/1.35 var(--font-mono);
--f-code:semi-condensed 450 11px/1.3 var(--font-mono);
--f-btn:semi-condensed 500 14px/1.2 var(--font-mono);
--f-obl:oblique 12deg 420 14px/1.3 var(--font-sans);
/* отступы ≈ ×1,6, других нет */
--s1:4px;--s2:8px;--s3:12px;--s4:20px;--s5:32px;--s6:52px;--s7:84px;--s8:136px;
/* лист (телефон): до рамки, подшивка, поле, колонки */
--sheet-max:1440px;--sheet-gap:10px;--frame:6px;--frame-l:6px;--pad:10px;--cols:1;--gutter:0px;--hdr-h:48px;--lw-frame:2px;
/* размерная линия: стрелки 8×5 (маски) */
--arw-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 2.5L8 0v5z'/%3E%3C/svg%3E");
--arw-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M8 2.5L0 0v5z'/%3E%3C/svg%3E");
--arw-u:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8'%3E%3Cpath d='M2.5 0L5 8H0z'/%3E%3C/svg%3E");
--arw-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8'%3E%3Cpath d='M2.5 8L0 0h5z'/%3E%3C/svg%3E");
--dim-mask:var(--arw-l) 0 50%/8px 5px no-repeat,var(--arw-r) 100% 50%/8px 5px no-repeat,linear-gradient(#000 0 0) 50%/100% 1px no-repeat;
--dim-mask-v:var(--arw-u) 50% 0/5px 8px no-repeat,var(--arw-d) 50% 100%/5px 8px no-repeat,linear-gradient(#000 0 0) 50%/1px 100% no-repeat;
--chev-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23000' stroke-width='1.25'%3E%3Cpath d='M4 2l4 4-4 4'/%3E%3C/svg%3E");
/* стрелка списка (select), цвет --line */
--sel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23CFE6FF'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
--hatch:repeating-linear-gradient(45deg,var(--hidden) 0 1px,#0000 0 4px);
/* волнистый обрыв: черта под заголовком листа, край .bleed-r */
--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='9' fill='none' stroke='%232A5A8C'%3E%3Cpath d='M0 4.5Q3-1.5 6 4.5T12 4.5T18 4.5T24 4.5'/%3E%3C/svg%3E");
--break:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='12'%3E%3Cpath d='M4 0Q10 3 4 6T4 12H9V0Z' fill='%230A2342'/%3E%3Cpath d='M4 0Q10 3 4 6T4 12' fill='none' stroke='%23CFE6FF'/%3E%3C/svg%3E");
/* движение, слои §3.7 */
--ease-settle:cubic-bezier(.2,.7,.2,1);--ease-mech:cubic-bezier(.2,0,0,1);--t-hover:120ms;--t-focus:220ms;--t-cloud:400ms;
--z-gfx:1;--z-box:2;--z-plate:3;--z-cap:4;--z-mini:20;--z-hdr:30;--z-menu:40}
@media (min-width:768px){:root{--sheet-gap:40px;--frame:12px;--frame-l:40px;--pad:24px;--cols:8;--gutter:20px;--hdr-h:64px}}
@media (min-width:1100px){:root{--frame:16px;--frame-l:56px;--pad:32px;--cols:12;--gutter:24px}}
}