@layer reset, legacy, tokens, base, layout, components, patterns, areas, utilities;

/* =============================================================================
   Alarmi design tokens (spec B2; values "Pinnat" 2026-10-27). Exact names and values; change them here only.
   Layer order above: legacy CSS (the old files, @import-ed into `legacy` by
   views/partials/head.php) loses to every new layer. Inline style="" still wins
   until a view is migrated.
   ========================================================================== */
@layer tokens {
:root{
  color-scheme: light;
  /* "Pinnat" (2026-10-27): white sheets with soft elevation on a calm cool page, sturdy Geologica text,
     wide Mona Sans display titles, 12-24 px corners. Replaces "Julkisivu" (thin Plex, 1 px graphite boxes).
     Contrast (WCAG 2.x): text 14.1:1 canvas / 16.2:1 white; text-2 8.6 / 9.8; muted 6.0 / 6.8 / 5.6 sunken;
     control edge 4.2 white / 3.7 canvas; white on Kuusi 9.5; focus 6.1 canvas / 7.0 white. */
  /* surfaces */
  --color-canvas:#ECF0EE; --color-surface:#FFFFFF; --color-surface-sunken:#E3E9E6; --color-surface-selected:#DDE8E3;
  /* text: body, second lines (ledes, kickers), hints and meta only (never body) */
  --color-text:#1A2225; --color-text-2:#3B4549; --color-text-muted:#525D5A; --color-text-inverse:#FFFFFF;
  /* lines: row dividers inside a sheet only; the 1.5 px control edge; the drawing line (never a box edge) */
  --color-border-subtle:#DCE4E0; --color-border-control:#727E79; --color-line-ink:#222A2D;
  /* action: Kuusi (white on #1F4D47 = 9.5:1; hover 11.8:1; Kuusi on canvas 8.3:1) */
  --color-action:#1F4D47; --color-action-hover:#183E39; --color-action-active:#12302C; --color-on-action:#FFFFFF;
  --color-link:#1F4D47; --color-focus:#0B57B0; /* distinct from the Kuusi buttons */
  --color-brand:#1F4D47;  /* Kuusi, decoration. Merkkivalo red (#E5392B) is only the logo dot, never UI */
  --color-brand-tint:#E0EDE7;  /* selected tints, the email-ready glass in the setup drawing (Kuusi on it 7.9:1) */
  --color-brand-field:#1F4D47; /* the one full Kuusi field per page (white text 9.5:1) */
  --color-danger-action:#B3261E;
  /* status: fg on white / fg on bg. Meanings unchanged; rings replace the old amber hatch. */
  --status-ok-fg:#1E6B4A;       --status-ok-bg:#E5F0EA;       --status-ok-line:#1F4D47;        /* 6.3 / 5.5; tested windows are solid Kuusi */
  --status-wait-fg:#2A3236;     --status-wait-bg:#FFFFFF;     --status-wait-line:#6B7773;      /* waiting window ring, 4.3:1 on the wall */
  --status-attn-fg:#844A00;     --status-attn-bg:#FFF3DE;     --status-attn-line:#B87516;      /* 6.9 / 6.3 */
  --status-problem-fg:#B3261E;  --status-problem-bg:#FCEBEA;  --status-problem-solid:#B42318; --status-problem-stripe:#8F1C13; /* 6.54 / 5.67; white on solid 6.6 */
  --status-unreached-fg:#7A4508;--status-unreached-bg:#FFF5E6;--status-unreached-line:#B87516;  /* 7.5 */
  --status-none-fg:#4B5563;     --status-none-bg:#F1F2F4;     --status-none-line:#8A94A3;
  /* type (public/css/fonts.css). Mono is retired: --font-mono is the text face, numbers get tabular-nums. */
  --font-ui:"Geologica",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;          /* body, labels, buttons */
  --font-heading:var(--font-ui);                                                       /* h2, h3, card titles */
  --font-display:"Mona Sans","Geologica",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; /* h1, display titles, big numbers */
  --font-number:var(--font-display);                                                   /* always with tabular-nums */
  --font-mono:var(--font-ui);
  --display-wdth:110%;   /* font-stretch with --font-display */
  --text-xs:.9375rem;   /* 15: legal fine print only, the floor */
  --text-sm:1rem;       /* 16: labels, hints, tags, meta */
  --text-base:1.125rem; /* 18: body, inputs, buttons (17 under 36rem) */
  --text-lead:1.25rem;  /* 20: ledes (18 under 36rem) */
  --text-md:1.375rem;   /* 22: card titles, h3 */
  --text-lg:clamp(1.5rem,1.25rem + .8vw,1.75rem);   /* 24-28: h2 */
  --text-xl:clamp(2rem,1.55rem + 1.4vw,2.5rem);     /* 32-40: h1 (Mona 700) */
  --text-2xl:clamp(2.5rem,1.9rem + 2vw,3.5rem);     /* 40-56: big numbers */
  --text-display:clamp(2.375rem,1.3rem + 3.9vw,4.5rem); /* 38-72: enrollment titles on auth pages (Mona 760) */
  --leading-tight:1.2; --leading-display:1.04; --leading-body:1.6; --measure:64ch;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-display:760;
  --tracking-display:-.02em; /* Mona only */
  /* space (4px base) */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem;
  /* radius */
  --radius-button:12px; --radius-control:12px; --radius-tile:6px; --radius-card:16px; --radius-sheet:24px;
  --radius-pill:999px; /* switch track only, never a button or a tag */
  --border-w-subtle:1px; --border-w-control:1.5px; --border-w-strong:2px;
  /* elevation separates; cards and sheets carry no outline (the 7 % ring keeps the edge on poor screens) */
  --shadow-card:0 0 0 1px rgb(26 34 37/.07),0 1px 2px rgb(26 34 37/.07),0 10px 28px -10px rgb(26 34 37/.18);
  --shadow-raised:0 1px 2px rgb(26 34 37/.10),0 2px 6px -2px rgb(26 34 37/.10);
  --shadow-overlay:0 2px 8px rgb(26 34 37/.10),0 24px 60px -16px rgb(26 34 37/.32);
  --shadow-button:0 1px 0 rgb(255 255 255/.14) inset,0 1px 2px rgb(18 48 44/.28); /* primary buttons only */
  --focus-ring:3px solid var(--color-focus); --focus-offset:2px;
  /* motion */
  --dur-fast:120ms; --dur:180ms; --dur-slow:280ms;
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.4,0,1,1);
  /* sizes */
  --control-h:3rem; --control-h-lg:3.5rem; --control-h-min:2.75rem;
  --topbar-h:4rem; --tabbar-h:4rem; --rail-w:15rem;
  --content-max:60rem; --content-max-wide:75rem; --content-shift-max:8rem; --gutter:1rem;
  --z-topbar:20; --z-tabbar:20; --z-toast:60;
  /* the building drawing (views/home/_facade.php, areas/home.css): filled shapes; an outline only means "not tested yet" */
  --draw-window-r:3px; --draw-wall-r:6px; --draw-wall-fill:#F3F6F4; --draw-roof-fill:#E3E9E6; --draw-ground:#C6D0CB;
  --draw-house-roof:#C6D0CB; --draw-type-roof:#8E9C96; /* houses (ENR-32) and the building-type tiles */
  --draw-ok-fill:#1F4D47; --draw-wait-fill:#FFFFFF; --draw-wait-stroke:#6B7773; --draw-wait-stroke-w:2px;
  --draw-attn-stroke:#B87516; --draw-attn-stroke-w:3px; --draw-attn-label:#844A00;
  --draw-problem-fill:#B42318; --draw-none-fill:#E3E9E6; --draw-detector:#222A2D; --draw-mail-glass:#E0EDE7;
}
@media (max-width:36rem){ :root{ --text-base:1.0625rem; --text-lead:1.125rem; --radius-sheet:22px; } }
html[data-text-size="large"]{ font-size:112.5%; }          /* whole rem scale follows (base ≈19px) */
@media (min-width:36rem){ :root{ --gutter:1.5rem; } }
@media (min-width:56.25rem){ :root{ --gutter:2rem; } }
@media (prefers-reduced-motion:reduce){
  :root{ --dur-fast:0ms; --dur:0ms; --dur-slow:0ms; }
}
/* STALE since 2026-10-27 (Julkisivu era, not updated for Pinnat). Dark set: defined, activated in phase 2 only, via :root[data-theme="dark"] (no prefers-color-scheme block in v1) */
:root[data-theme="dark"]{ color-scheme:dark;
  --color-canvas:#0F1F1C; --color-surface:#162925; --color-surface-sunken:#1E332E; --color-surface-selected:#1F3D37;
  --color-text:#EEE9DF; --color-text-muted:#A9B6B1; --color-border-subtle:#2A3F3A; --color-border-control:#6F837D;
  --color-action:#8FC4B6; --color-action-hover:#A8D3C7; --color-action-active:#BFE0D6; --color-on-action:#0F1F1C; --color-link:#A8D3C7; --color-focus:#8AB4F8; --color-brand:#8FC4B6;
  --status-ok-fg:#6FCF97; --status-ok-bg:#16301F; --status-wait-fg:#8AB4F8; --status-wait-bg:#172437;
  --status-attn-fg:#F2B45A; --status-attn-bg:#33260F; --status-problem-fg:#FF8A80; --status-problem-bg:#3A1A18; --status-problem-solid:#C2352A;
  --status-unreached-fg:#D5DAE0; --status-unreached-bg:#343A42; --status-none-fg:#C3C9D1; --status-none-bg:#262A2F; }
}