/* Design tokens, built on the hig42-design skill (HIG 2026-09, iOS 26 / macOS 26+ values).
   Desktop (≥761px) follows macOS app-style metrics; phones follow iOS. Colors are iOS 26 system
   values with light / dark / high-contrast variants; the brand tint has all four variants too. */
:root{
  color-scheme:light dark;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,system-ui,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  /* macOS text styles (desktop) */
  --t-large:26px;--t-large-lh:32px;--t-title1:22px;--t-title1-lh:26px;--t-title2:17px;--t-title2-lh:22px;--t-title3:15px;--t-title3-lh:20px;
  --t-headline:13px;--t-headline-lh:16px;--t-body:13px;--t-body-lh:16px;--t-callout:12px;--t-callout-lh:15px;--t-subhead:11px;--t-subhead-lh:14px;
  --t-footnote:11px;--t-footnote-lh:14px;--t-caption:11px;--t-caption-lh:14px;
  --headline-weight:700;

  /* Spacing: subview 8, root 16/20, ~12 around bordered controls (HIG numbers; 8pt grid is convention) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s11:44px;
  --gutter:20px;
  /* Shapes: controls 6, groups 10 (mac) / 12 (web tool), sheets 12–16, capsule 980 */
  --r-small:6px;--r-control:6px;--r-group:10px;--r-card:10px;--r-sheet:12px;--r-pill:980px;
  --control-h:24px;--control-h-large:28px;--row-h:32px;--hit:28px;

  /* macOS labels: black/white + alpha */
  --label:rgba(0,0,0,.847);--label-2:rgba(0,0,0,.498);--label-3:rgba(0,0,0,.259);--label-4:rgba(0,0,0,.098);
  --separator:rgba(0,0,0,.098);--separator-opaque:#C6C6C8;
  --bg:#F6F6F6;--bg-2:#FFFFFF;--bg-grouped:#F6F6F6;--bg-cell:#FFFFFF;--bg-elevated:#FFFFFF;--bg-sidebar:#F6F6F6;
  --fill:rgba(0,0,0,.098);--fill-2:rgba(0,0,0,.078);--fill-3:rgba(0,0,0,.047);--fill-4:rgba(0,0,0,.03);
  --selection:#0064E1;--selected-bg:#DCDCDC;

  /* iOS 26 system colors (unified since 26) */
  --red:#FF383C;--orange:#FF8D28;--yellow:#FFCC00;--green:#34C759;--blue:#0088FF;--gray:#8E8E93;
  --red-soft:rgba(255,56,60,.12);--orange-soft:rgba(255,141,40,.14);--green-soft:rgba(52,199,89,.14);--blue-soft:rgba(0,136,255,.12);
  /* Dark-enough inks for ≤13px text (system colors alone are 2.2–3.6:1 on white) */
  --red-ink:#C21E24;--orange-ink:#9A4B00;--green-ink:#1B7A35;--blue-ink:#0066CC;
  --link:#0068DA;

  /* Brand tint (logo navy in Ақ, logo gold in Көк / Қараңғы): light / dark / high-contrast variants below.
     Gold is never used for text on white (2.3:1). */
  --tint:#24346E;--tint-hover:#1C2A5C;--tint-soft:rgba(36,52,110,.1);--tint-ink:#24346E;--on-tint:#FFFFFF;
  /* Login logo: Ақ = stacked lockup (square box); Көк / Қараңғы = horizontal lockup (640×223 asset). */
  --brand-logo:url("/brand/logo-light.png");--brand-logo-w:160px;--brand-logo-ratio:1;

  /* Charts (validated with the dataviz palette checker) */
  --series-1:#3A56B0;--series-2:#EB6834;--series-1-soft:rgba(58,86,176,.12);--grid:rgba(0,0,0,.08);--axis:rgba(0,0,0,.2);

  /* Materials: frosted glass only on the functional layer (sidebar / toolbar / tab bar) */
  --glass-bg:rgba(250,250,252,.8);--glass-bg-solid:rgba(250,250,252,.92);--glass-filter:saturate(180%) blur(20px);
  --shadow-pop:0 12px 40px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.08);--shadow-sheet:0 24px 80px rgba(0,0,0,.22),0 0 0 .5px rgba(0,0,0,.08);
  --ring:inset 0 0 0 .5px var(--separator);

  /* Motion: spring (SwiftUI .smooth sampled) with easing fallback */
  --ease:cubic-bezier(.25,.1,.3,1);--ease-apple:cubic-bezier(.4,0,.6,1);--ease-spring:cubic-bezier(.25,.1,.3,1);
  --dur-fast:200ms;--dur:320ms;--dur-panel:450ms;
}
@supports (transition-timing-function:linear(0,1)){:root{--ease-spring:linear(0,0.068 5%,0.208 10%,0.362 15%,0.504 20%,0.624 25%,0.720 30%,0.795 35%,0.851 40%,0.893 45%,0.924 50%,0.946 55%,0.962 60%,0.973 65%,0.981 70%,0.987 75%,0.991 80%,0.994 85%,0.996 90%,0.997 95%,1)}}

/* iOS metrics on phones */
@media (max-width:760px){:root{
  --t-large:34px;--t-large-lh:41px;--t-title1:28px;--t-title1-lh:34px;--t-title2:22px;--t-title2-lh:28px;--t-title3:20px;--t-title3-lh:25px;
  --t-headline:17px;--t-headline-lh:22px;--t-body:17px;--t-body-lh:22px;--t-callout:16px;--t-callout-lh:21px;--t-subhead:15px;--t-subhead-lh:20px;
  --t-footnote:13px;--t-footnote-lh:18px;--t-caption:12px;--t-caption-lh:16px;--headline-weight:600;
  --gutter:16px;--r-control:8px;--r-group:12px;--r-card:12px;--r-sheet:16px;--control-h:34px;--control-h-large:44px;--row-h:44px;--hit:44px;
  --label:#000000;--label-2:rgba(60,60,67,.6);--label-3:rgba(60,60,67,.3);--label-4:rgba(60,60,67,.18);
  --separator:rgba(60,60,67,.12);--bg:#F2F2F7;--bg-2:#FFFFFF;--bg-grouped:#F2F2F7;--bg-cell:#FFFFFF;--bg-sidebar:#F2F2F7;
  --fill:rgba(120,120,128,.2);--fill-2:rgba(120,120,128,.16);--fill-3:rgba(118,118,128,.12);--fill-4:rgba(116,116,128,.08);
  --ring:none;--link:#0066CC;--brand-logo-w:128px;
}}

/* Themes: «Жүйе» = no data-theme (follows the OS), «Ақ» = light, «Қараңғы» = dark,
   «Көк» = the dark tokens plus a small navy override block below (never a copy of the dark block). */
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --label:rgba(255,255,255,.847);--label-2:rgba(255,255,255,.549);--label-3:rgba(255,255,255,.247);--label-4:rgba(255,255,255,.098);
  --separator:rgba(255,255,255,.098);--separator-opaque:#38383A;
  --bg:#1E1E1E;--bg-2:#282828;--bg-grouped:#1E1E1E;--bg-cell:#282828;--bg-elevated:#2A2A2A;--bg-sidebar:#1E1E1E;
  --fill:rgba(255,255,255,.098);--fill-2:rgba(255,255,255,.078);--fill-3:rgba(255,255,255,.047);--fill-4:rgba(255,255,255,.03);
  --selection:#0059D1;--selected-bg:#464646;
  --red:#FF4245;--orange:#FF9230;--yellow:#FFD600;--green:#30D158;--blue:#0091FF;--gray:#98989D;
  --red-soft:rgba(255,66,69,.18);--orange-soft:rgba(255,146,48,.18);--green-soft:rgba(48,209,88,.18);--blue-soft:rgba(0,145,255,.18);
  --red-ink:#FF7B72;--orange-ink:#FFB340;--green-ink:#5EE07F;--blue-ink:#64B0FF;--link:#419CFF;
  --tint:#D9B96E;--tint-hover:#E4C88A;--tint-soft:rgba(217,185,110,.16);--tint-ink:#E6CF98;--on-tint:#0B1433;
  --brand-logo:url("/brand/logo-dark.png");--brand-logo-w:min(100%,300px);--brand-logo-ratio:640/223;
  --series-1:#7C93E6;--series-2:#D95926;--series-1-soft:rgba(124,147,230,.18);--grid:rgba(255,255,255,.1);--axis:rgba(255,255,255,.22);
  --glass-bg:rgba(30,30,30,.8);--glass-bg-solid:rgba(30,30,30,.92);--shadow-pop:0 12px 40px rgba(0,0,0,.5),0 0 0 .5px rgba(255,255,255,.1);--shadow-sheet:0 24px 80px rgba(0,0,0,.6),0 0 0 .5px rgba(255,255,255,.1);
}
@media (max-width:760px){:root:not([data-theme]){
  --label:#FFFFFF;--label-2:rgba(235,235,245,.6);--label-3:rgba(235,235,245,.3);--label-4:rgba(235,235,245,.16);
  --separator:rgba(84,84,88,.5);--bg:#000000;--bg-2:#1C1C1E;--bg-grouped:#000000;--bg-cell:#1C1C1E;--bg-elevated:#1C1C1E;--bg-sidebar:#000000;
  --fill:rgba(120,120,128,.36);--fill-2:rgba(120,120,128,.32);--fill-3:rgba(118,118,128,.24);--fill-4:rgba(118,118,128,.18);--link:#2997FF;
  --glass-bg:rgba(22,22,23,.8);--glass-bg-solid:rgba(22,22,23,.88);
}}}
:root[data-theme="dark"],:root[data-theme="blue"]{
  --label:rgba(255,255,255,.847);--label-2:rgba(255,255,255,.549);--label-3:rgba(255,255,255,.247);--label-4:rgba(255,255,255,.098);
  --separator:rgba(255,255,255,.098);--separator-opaque:#38383A;
  --bg:#1E1E1E;--bg-2:#282828;--bg-grouped:#1E1E1E;--bg-cell:#282828;--bg-elevated:#2A2A2A;--bg-sidebar:#1E1E1E;
  --fill:rgba(255,255,255,.098);--fill-2:rgba(255,255,255,.078);--fill-3:rgba(255,255,255,.047);--fill-4:rgba(255,255,255,.03);
  --selection:#0059D1;--selected-bg:#464646;
  --red:#FF4245;--orange:#FF9230;--yellow:#FFD600;--green:#30D158;--blue:#0091FF;--gray:#98989D;
  --red-soft:rgba(255,66,69,.18);--orange-soft:rgba(255,146,48,.18);--green-soft:rgba(48,209,88,.18);--blue-soft:rgba(0,145,255,.18);
  --red-ink:#FF7B72;--orange-ink:#FFB340;--green-ink:#5EE07F;--blue-ink:#64B0FF;--link:#419CFF;
  --tint:#D9B96E;--tint-hover:#E4C88A;--tint-soft:rgba(217,185,110,.16);--tint-ink:#E6CF98;--on-tint:#0B1433;
  --brand-logo:url("/brand/logo-dark.png");--brand-logo-w:min(100%,300px);--brand-logo-ratio:640/223;
  --series-1:#7C93E6;--series-2:#D95926;--series-1-soft:rgba(124,147,230,.18);--grid:rgba(255,255,255,.1);--axis:rgba(255,255,255,.22);
  --glass-bg:rgba(30,30,30,.8);--glass-bg-solid:rgba(30,30,30,.92);--shadow-pop:0 12px 40px rgba(0,0,0,.5),0 0 0 .5px rgba(255,255,255,.1);--shadow-sheet:0 24px 80px rgba(0,0,0,.6),0 0 0 .5px rgba(255,255,255,.1);
}
@media (max-width:760px){:root[data-theme="dark"],:root[data-theme="blue"]{
  --label:#FFFFFF;--label-2:rgba(235,235,245,.6);--label-3:rgba(235,235,245,.3);--label-4:rgba(235,235,245,.16);
  --separator:rgba(84,84,88,.5);--bg:#000000;--bg-2:#1C1C1E;--bg-grouped:#000000;--bg-cell:#1C1C1E;--bg-elevated:#1C1C1E;--bg-sidebar:#000000;
  --fill:rgba(120,120,128,.36);--fill-2:rgba(120,120,128,.32);--fill-3:rgba(118,118,128,.24);--fill-4:rgba(118,118,128,.18);--link:#2997FF;
  --glass-bg:rgba(22,22,23,.8);--glass-bg-solid:rgba(22,22,23,.88);
}}
/* «Көк»: deep navy surfaces from the logo, gold tint inherited from the dark block. Placed after the phone
   block so phones get navy too (not black); labels, fills and status colours stay the dark ones. */
:root[data-theme="blue"]{
  --bg:#0B1433;--bg-2:#121E45;--bg-grouped:#0B1433;--bg-cell:#121E45;--bg-elevated:#17255A;--bg-sidebar:#0E1838;
  --separator:rgba(255,255,255,.12);--separator-opaque:#2A3766;--selected-bg:#24346E;
  --link:#A9C1FF;--brand-logo:url("/brand/logo-blue.png");
  --glass-bg:rgba(14,24,56,.8);--glass-bg-solid:rgba(14,24,56,.92);
}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"],:root[data-theme="blue"]{color-scheme:dark}

/* Increase Contrast: HIG high-contrast columns; glass becomes opaque.
   :not() with a list keeps specificity at (0,2,0) so the system-dark block below still wins by order. */
@media (prefers-contrast:more){
  :root:not([data-theme="dark"],[data-theme="blue"]){--red:#E9152D;--orange:#C55300;--yellow:#A16A00;--green:#008932;--blue:#1E6EF4;--gray:#6C6C70;--tint:#182454;--tint-ink:#182454;--label-2:rgba(0,0,0,.8);--label-3:rgba(0,0,0,.7);--label-4:rgba(0,0,0,.55);--glass-bg:var(--glass-bg-solid)}
  :root[data-theme="dark"],:root[data-theme="blue"]{--red:#FF6165;--orange:#FFA056;--yellow:#FEDF43;--green:#4AD968;--blue:#5CB8FF;--gray:#AEAEB2;--tint:#E8CD8F;--tint-ink:#F2DDB0;--label-2:rgba(255,255,255,.7);--label-3:rgba(255,255,255,.55);--label-4:rgba(255,255,255,.4);--glass-bg:var(--glass-bg-solid)}
}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){
  :root:not([data-theme]){--red:#FF6165;--orange:#FFA056;--yellow:#FEDF43;--green:#4AD968;--blue:#5CB8FF;--gray:#AEAEB2;--tint:#E8CD8F;--tint-ink:#F2DDB0;--label-2:rgba(255,255,255,.7);--label-3:rgba(255,255,255,.55);--label-4:rgba(255,255,255,.4);--glass-bg:var(--glass-bg-solid)}
}
@media (prefers-reduced-motion:reduce){:root{--dur:0ms;--dur-fast:0ms;--dur-panel:0ms}}