/* Netz Design Kit — light-only token substrate.
   The Netz look (R9, Liam, 12–22 Oct 2026, NET-1923; adopted as the kit look 25 Oct 2026, NET-4013): a periwinkle ground,
   one framed canvas, white sections, near-black Manrope type, capsule actions. One source: every template and every
   product reads these roles; nothing forks the values. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../../assets/fonts/manrope-var-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --netz-canvas: #e1ebfd; /* the canvas text floor: secondary ink keeps AA on every pixel of the wash */
  --netz-surface: #ffffff;
  --netz-surface-subtle: #f5f8fe; /* the well */
  --netz-surface-selected: #eff3fc;
  --netz-ink: #1d1e20;
  --netz-ink-secondary: #525a6a; /* R9 calls this --nz-muted-ink; R9's --nz-ink-secondary #626979 is the kit's ink-muted. Port by value, not by name. */
  --netz-ink-muted: #626979;
  --netz-line: #ebeff6; /* hairline: rows inside a section */
  --netz-line-strong: #d3deef; /* edge: a section on the wash */
  --netz-action: #1a5ce8;
  --netz-action-hover: #1450d6;
  --netz-action-press: #1146bd;
  --netz-action-ink: #1450d6; /* links and selected text */
  --netz-operator: #1b3156;
  --netz-crystal-mist: #eaf1ff;
  --netz-positive: #087d55;
  --netz-positive-bg: #dff9ee;
  --netz-progress: #5a47ca;
  --netz-progress-bg: #ece9ff;
  --netz-neutral: #536176;
  --netz-neutral-bg: #edf1f6;
  --netz-critical: #bd2949;
  --netz-critical-bg: #ffe7ed;
  /* Preview tag (.netz-preview): a feature behind a per-org flag, shown only to the reveal org. Its own
     pair, not a fifth status role; same hexes as action-hover / crystal-mist today, retuned independently.
     Text on fill 6.20:1. The glyph uses --netz-action. */
  --netz-preview: #174fc8;
  --netz-preview-bg: #eaf1ff;
  --netz-radius-control: 8px;
  --netz-radius-overlay: 22px;
  --netz-radius-card: 20px; /* a section */
  --netz-radius-nested: 14px; /* a tile inside a section */
  --netz-radius-capsule: 999px; /* buttons, filter chips */
  --netz-radius-canvas: 24px;
  --netz-radius-nav: 10px;
  --netz-radius-medallion: 10px;
  --netz-radius-feature: 22px;
  --netz-shadow-surface: 0 1px 2px rgba(22, 44, 92, 0.07), 0 4px 10px -6px rgba(22, 44, 92, 0.08), 0 16px 36px -18px rgba(30, 58, 128, 0.3);
  --netz-shadow-raised: 0 1px 2px rgba(22, 44, 92, 0.06), 0 18px 40px -20px rgba(22, 44, 92, 0.28);
  --netz-shadow-control: 0 1px 2px rgba(29, 30, 32, 0.05);
  --netz-shadow-overlay: 0 24px 64px -26px rgba(19, 39, 75, 0.42), 0 8px 22px -16px rgba(19, 39, 75, 0.22), inset 0 1px #fff;
  --netz-radius-filter: 12px;
  --netz-radius-composer: 24px;
  --netz-selection-size: 14px;
  --netz-report-filter-height: 48px;
  --netz-dock-width: 486px;
  /* At rest a text bar is a quiet edge and a soft lift. The ambient blue halo that used to sit here
     read as a permanent focus ring, so the field looked selected when it was not — and when it
     really was focused, nothing changed. The glow belongs to focus alone. */
  --netz-shadow-composer: inset 0 0 0 1px rgba(31,43,71,.09), 0 2px 8px -4px rgba(16,32,64,.10), 0 10px 26px -18px rgba(16,32,64,.22);
  --netz-shadow-composer-focus: inset 0 0 0 1px rgba(31,43,71,.08), 0 8px 24px -12px rgba(10,100,235,.22), 0 0 26px 2px rgba(10,100,235,.19);
  --netz-crystal-gradient: radial-gradient(120% 90% at 8% 4%, #fff 0%, #fff 28%, transparent 60%), linear-gradient(135deg, #fff, #eef4ff 32%, #dbe8ff 58%, #b4d0fb 78%, #8ab6fa);
  --netz-depth-gradient: radial-gradient(80% 120% at 100% 100%, rgba(82,145,248,.32), transparent 72%), linear-gradient(135deg, #fbfdff 0%, #e6efff 48%, #c8ddff 100%);
  --netz-overview-gradient: radial-gradient(75% 105% at 100% 100%, rgba(82,145,248,.35), transparent 74%), linear-gradient(135deg, #fff 0%, #eef4ff 42%, #d0e1ff 100%);
  --netz-search-focus: 0 0 0 1px rgba(10,100,235,.10), 0 0 18px 2px rgba(10,100,235,.16);
  --netz-stop-bg: #e2e6ed;
  --netz-stop-ink: #626e7f;
  --netz-stop-hover: #bd2949;
  --netz-ease: cubic-bezier(.22, 1, .36, 1);
  /* The Netz look (COMPONENTS.md § Shell and page). */
  --netz-font: "Manrope", "Archivo", "Inter", -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --netz-table-head-bg: #f3f6fc; /* measured on the rendered R9 tables (figma-kit), where theme-r9.css's #f4f7fc / #536176 tokens are overridden */
  --netz-table-head-ink: #525a6a;
  --netz-table-row-line: #efeff1;
  --netz-control-edge: rgba(31, 43, 71, 0.1);
  --netz-chip-edge: rgba(29, 30, 32, 0.043);
  --netz-ground: radial-gradient(70% 45% at 30% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%), radial-gradient(70% 60% at 0% 100%, rgba(126,152,222,.55) 0%, rgba(126,152,222,0) 70%), radial-gradient(60% 60% at 100% 100%, rgba(118,150,228,.5) 0%, rgba(118,150,228,0) 72%), linear-gradient(180deg, #dbe6f5 0%, #ccdbf0 55%, #b9cbea 100%);
  --netz-ground-fallback: #eef3fd;
  --netz-canvas-wash: linear-gradient(180deg, rgba(246,249,255,.74) 0px, rgba(246,249,255,.7) 170px, rgba(246,249,255,0) 340px), radial-gradient(60% 34% at 46% -6%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 72%), linear-gradient(162deg, rgba(255,255,255,0) 46%, rgba(255,255,255,.3) 55%, rgba(255,255,255,0) 66%), linear-gradient(0deg, rgba(120,146,222,.32) 0px, rgba(120,146,222,0) 34px), radial-gradient(9% 55% at 100% 78%, rgba(112,148,232,.42) 0%, rgba(112,148,232,0) 100%), radial-gradient(26% 34% at -6% 110%, rgba(120,146,222,.55) 0%, rgba(120,146,222,0) 70%), radial-gradient(52% 60% at 104% 104%, rgba(112,148,232,.6) 0%, rgba(112,148,232,0) 72%), radial-gradient(38% 32% at 78% 82%, rgba(206,196,242,.42) 0%, rgba(206,196,242,0) 70%), linear-gradient(90deg, #e1ebfd 0%, #e1ebfd 38%, #d6e3fa 70%, #c8d8f4 100%);
  --netz-canvas-frame: inset 0 0 4px 2px rgba(255,255,255,.35), 0 1px 2px rgba(22,44,92,.04), 0 18px 48px -28px rgba(22,44,92,.22);
  --netz-sidebar-glass: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.42) 45%, rgba(255,255,255,.26) 100%);
  --netz-nav-current: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,.92) 100%);
  --netz-nav-current-shadow: inset 0 0 0 1px rgba(23,105,242,.22), 0 1px 2px rgba(22,44,92,.08), 0 8px 18px -10px rgba(23,105,242,.5);
  --netz-glass-sm: 0 1px 1px rgba(160,165,171,.05), 0 3px 3px rgba(160,165,171,.04), 0 6px 4px rgba(160,165,171,.03), 0 11px 4px rgba(160,165,171,.01);
  --netz-action-fill: linear-gradient(180deg, #2a6cf3 0%, #1a5ce8 52%, #1450d6 100%);
  --netz-action-fill-hover: linear-gradient(180deg, #2061e8 0%, #1551d8 52%, #1146c0 100%);
  --netz-action-fill-press: linear-gradient(180deg, #1a52cf 0%, #1146bd 100%);
  --netz-action-sheen: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(8,30,90,.16);
  --netz-action-glow: 0 1px 2px rgba(16,58,160,.3), 0 6px 16px -6px rgba(26,92,232,.55);
  --netz-medallion-fill: linear-gradient(180deg, rgba(255,255,255,.92), #eaf1ff);
  --netz-medallion-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px #dfe7f4, 0 4px 12px -4px rgba(26,92,232,.22);
  --netz-tile-fill: linear-gradient(180deg, #fff 0%, #f7faff 100%);
  --netz-focus-ring: 0 0 0 3px rgba(47,116,255,.32);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background-color: var(--netz-ground-fallback);
  background-image: var(--netz-ground);
  background-attachment: fixed;
  color: var(--netz-ink);
  font-family: var(--netz-font);
  word-spacing: .06em; /* Manrope sets its space tight; R9.2 opens it by 0.06em of each element's own size */
  font-variant-numeric: lining-nums tabular-nums;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select { font: inherit; }
button, [role="button"], a[href] { cursor: pointer; }

:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--netz-action) 72%, white);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}