/* Design systemin tila ja muoto · perusta. Päätökset: DESIGN-SYSTEM-PERUSTAT-2026-11.md §3.
   Välit 4 px:n sarjasta, kulmat koon mukaan ja samankeskisinä, kolme varjotasoa,
   neljä kestoa ja kolme käyrää, z-tasot vain sille mikä ei ole ylimmällä tasolla. */

:root:root:root{
 /* Välit */
 --space-0_5:2px;--space-1:4px;--space-1_5:6px;--space-2:8px;--space-3:12px;--space-4:16px;
 --space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
 /* Vain toistuvat mallit saavat nimen */
 --pad-control:var(--space-4);--row-inset:var(--space-5);--surface-pad:var(--space-6);
 --gap-stack:var(--space-4);--gap-inline:var(--space-2);
 /* Kulmat koon mukaan. Sisäkkäinen kulma = ulompi − väli, vähintään 4 px. */
 --radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-control:10px;--radius-lg:14px;
 --radius-xl:20px;--radius-composer:24px;--radius-full:999px;--radius-surface:var(--radius-xl);
 /* Varjot: kohotettu · kelluva · peittävä (arvot teemoittain colors.css:ssä) */
 --shadow-1:var(--ds-composer-shadow);--shadow-2:var(--ds-pop-shadow);--shadow-3:var(--ds-surface-shadow);
 /* Liike */
 --dur-1:100ms;--dur-2:140ms;--dur-3:200ms;--dur-4:280ms;
 --ease-standard:cubic-bezier(.2,0,0,1);--ease-exit:cubic-bezier(.4,0,1,1);
 --ease-spring:linear(0,.2 6%,.45 13%,.66 21%,.81 30%,.9 40%,.955 51%,.982 63%,.995 78%,1);
 --t-surface-in:var(--dur-4);--t-surface-out:var(--dur-3);
 /* Z-tasot: natiivit popover ja dialog ovat jo ylimmällä tasolla */
 --z-raised:1;--z-sticky:10;--z-panel:30;--z-toast:60;--z-tooltip:70;
 /* Koot: kosketusala aina ≥ 44 px */
 --control-sm:32px;--control-md:36px;--control-lg:44px;--hit:44px;--icon-sm:16px;--icon-md:18px;
 /* Asettelu */
 --measure:68ch;--column-chat:760px;--page-gutter:var(--space-4);
}
@media (min-width:768px){:root:root:root{--page-gutter:var(--space-8)}}

/* Jatkuva kulma (iOS-tyylinen squircle) isoille pinnoille, missä selain tukee. */
@supports (corner-shape:squircle){
 :where(.ds-pop,.ds-panel,dialog.ds-dialog,.ds-composer,.ds-toast,.ds-alert,.ds-proposal,.ds-cite-preview){corner-shape:squircle}
}

@media (prefers-reduced-motion:reduce){
 :root:root:root{--dur-1:0ms;--dur-2:0ms;--dur-3:0ms;--dur-4:100ms;--ease-spring:linear(0,1)}
}