/* =============================================================================
   URBINATOR V2 — "BLUEPRINT" DESIGN TOKENS
   Single source of truth for color, type, space, radius, elevation.
   Chosen 2026-07-12. Supersedes the accreted style.css for V2 work.
   Direction: architectural blue-grey instrument · faint measurement grid ·
   mono for every code/ID/label · sharp 3–8px corners ·
   safety-orange = ACTIONS · cobalt = DATA · status triads preserved.
   ============================================================================= */

/* Fonts — the real app is allowed to load these (not under Artifact CSP).
   Hanken Grotesk = UI voice (weight-not-family hierarchy).
   IBM Plex Mono  = codes / IDs / labels (Blueprint's engineering DNA). */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- Type families ---- */
  --font-ui:   'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Type scale (dense field-tool rhythm) ---- */
  --fs-display: clamp(1.5rem, 2.4vw, 1.95rem);  /* page/dashboard heroes  */
  --fs-h2:      1.15rem;                          /* card / panel titles    */
  --fs-title:   1rem;                             /* section titles         */
  --fs-body:    13px;                             /* the working text       */
  --fs-sm:      12px;                             /* meta, secondary        */
  --fs-label:   11px;                             /* labels, chips, pills   */
  --fs-mono:    11.5px;                            /* codes / IDs            */

  --lh-tight: 1.15;
  --lh-title: 1.3;
  --lh-body:  1.5;
  --ls-tight: -0.02em;
  --ls-label:  0.06em;   /* labels get tracked-out caps for scanning */

  /* ---- Blueprint core palette ---- */
  --ink:        #14202f;   /* primary text — blue-black                     */
  --ink-2:      #46586e;   /* secondary text                                */
  --ink-3:      #7c8da3;   /* muted text                                    */
  --bar: #2c4a72;   /* dark topbar / breadcrumb strip                */
  --bar-ink:    #eaf0f8;   /* text on the dark bar                          */
  --bar-ink-2:  #9db3d0;   /* muted text on the dark bar                    */

  --cobalt:       #17408b; /* DATA voice: progress, charts, structural rule */
  --cobalt-hover: #1e50a8;
  --cobalt-tint:  #e6ecf6; /* selected/data-fill background                 */
  --cobalt-line:  #bcc9ec;

  --orange:       #e8590c; /* ACTION voice: primary buttons, active states  */
  --orange-hover: #c9490a;
  --orange-tint:  #fdeede; /* action hover backgrounds, active-tab wash     */
  --orange-line:  #f2c6a3;

  /* ---- Surfaces & lines (blueprint paper) ---- */
  --paper: #ffffff;   /* app background — carries the measurement grid */
  --surface:    #ffffff;   /* cards, inputs, panels                         */
  --surface-2:  #f3f6f9;   /* section bars, insets, table stripes           */
  --line:       #cad4df;   /* hairline (blue-grey)                          */
  --line-soft:  #dde4ec;
  --line-strong:#aebccc;
  --grid: transparent;  /* the faint 22px measurement grid */
  --grid-size:  22px;

  /* ---- Radius (Blueprint is sharp) ---- */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* ---- Spacing rhythm (4/8/12/16/22/32) ---- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 22px;
  --s6: 32px;

  /* ---- Elevation (ink-tinted, low-opacity, never flat black) ---- */
  --sh-sm: 0 1px 2px rgba(18,35,61,.05);
  --sh:    0 1px 2px rgba(18,35,61,.05), 0 2px 6px rgba(18,35,61,.06);
  --sh-md: 0 4px 10px -2px rgba(18,35,61,.10), 0 2px 4px -2px rgba(18,35,61,.05);
  --sh-lg: 0 12px 28px -6px rgba(18,35,61,.20), 0 6px 12px -6px rgba(18,35,61,.12);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: .18s;

  /* ---- Focus ---- */
  --focus-ring: 0 0 0 3px rgba(232,89,12,.28);   /* orange = interactive */
  --focus-ring-data: 0 0 0 3px rgba(23,64,139,.25);

  /* =========================================================================
     STATUS & CATEGORY PALETTE — preserved from V1 DESIGN.md.
     Each triad {bg / text / border} is legibility-tuned to NOT collide across
     the field-status and SSV-status sets. Do NOT casually recolor these.
     ========================================================================= */
  /* Field status */
  --st-blank-bg:#f1f5f9;   --st-blank-fg:#64748b;   --st-blank-bd:#cbd5e1;
  --st-veldok-bg:#d1fae5;  --st-veldok-fg:#065f46;  --st-veldok-bd:#a7f3d0;
  --st-nothome-bg:#fff7ed; --st-nothome-fg:#c2410c; --st-nothome-bd:#fed7aa;
  --st-toplan-bg:#dbeafe;  --st-toplan-fg:#1e40af;  --st-toplan-bd:#bfdbfe;
  --st-wacht-bg:#f3e8ff;   --st-wacht-fg:#6b21a8;   --st-wacht-bd:#e9d5ff;
  --st-weiger-bg:#fee2e2;  --st-weiger-fg:#7f1d1d;  --st-weiger-bd:#fca5a5;
  --st-nac-bg:#fee2e2;     --st-nac-fg:#991b1b;     --st-nac-bd:#fecaca;
  --st-cancel-bg:#e2e8f0;  --st-cancel-fg:#334155;  --st-cancel-bd:#cbd5e1;
  --st-sdu-bg:#fce7f3;     --st-sdu-fg:#9d174d;     --st-sdu-bd:#fbcfe8;
  /* SSV lifecycle status */
  --sv-ongoing-bg:#fde68a; --sv-ongoing-fg:#78350f; --sv-ongoing-bd:#f59e0b;
  --sv-done-bg:#c7d2fe;    --sv-done-fg:#1e1b4b;    --sv-done-bd:#6366f1;
  --sv-valid-bg:#6ee7b7;   --sv-valid-fg:#064e3b;   --sv-valid-bd:#10b981;
  --sv-declined-bg:#fecaca;--sv-declined-fg:#7f1d1d;--sv-declined-bd:#ef4444;

  /* Building-layout unit types (from DESIGN.md) */
  --lu-fg:#0d5c6b;  --lu-bg:#e0f2f5;     /* living units (was teal 'LU')     */
  --bu-fg:#4d7c0f;  --bu-bg:#f2f9e6;     /* business units (lime)            */
  --su-fg:#92400e;  --su-bg:#fff7ed;     /* service units (amber)            */
  --shaft-fg:#6d28d9; --shaft-bg:#ede9fe;/* shafts (violet)                  */
}

/* =========================================================================
   DARK THEME — deeper blueprint (available if we enable theme switching).
   Kept token-level so components never hardcode a theme.
   ========================================================================= */
/* Auto OS-dark-mode DISABLED (user wants an always-light/white app). The dark
   palette below is kept only for an explicit [data-theme="dark"] toggle, which
   nothing sets — so the light theme (white background) always applies. */
:root[data-theme="dark"]{
  --ink:#e7eef7; --ink-2:#a9b8cc; --ink-3:#6f8098;
  --bar:#0c1626; --bar-ink:#e7eef7; --bar-ink-2:#8ea3c2;
  --cobalt:#5b8def; --cobalt-hover:#7aa3f4; --cobalt-tint:#16233c; --cobalt-line:#274268;
  --orange:#ff7434; --orange-hover:#ff8a52; --orange-tint:#2c1a10; --orange-line:#5a3216;
  --paper:#0c1116; --surface:#141c26; --surface-2:#1a232f;
  --line:#26313f; --line-soft:#202a36; --line-strong:#33404f;
  --grid: transparent;
  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --sh:0 1px 2px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.35);
  --sh-md:0 4px 10px -2px rgba(0,0,0,.5),0 2px 4px -2px rgba(0,0,0,.35);
  --sh-lg:0 12px 28px -6px rgba(0,0,0,.6),0 6px 12px -6px rgba(0,0,0,.4);
}
:root[data-theme="light"]{
  /* explicit light re-assertion so the toggle wins over OS dark */
  --ink:#14202f; --ink-2:#46586e; --ink-3:#7c8da3;
  --bar: #2c4a72; --bar-ink:#eaf0f8; --bar-ink-2:#9db3d0;
  --cobalt:#17408b; --cobalt-hover:#1e50a8; --cobalt-tint:#e6ecf6; --cobalt-line:#bcc9ec;
  --orange:#e8590c; --orange-hover:#c9490a; --orange-tint:#fdeede; --orange-line:#f2c6a3;
  --paper: #ffffff; --surface:#ffffff; --surface-2:#f3f6f9;
  --line:#cad4df; --line-soft:#dde4ec; --line-strong:#aebccc;
  --grid: transparent;
}