/* Host design tokens reconstructed from the Imagine design system (light mode),
   so the mockups render standalone with no host environment. */
:root{
  /* Enterprise (ai-starter "Demo AI-Native CRM" Mantine) palette — navy accent #1c4f8c, white /
     soft-grey surfaces, SOFT grey borders (never black), radius sm. Rethemed IN PLACE: every existing
     screen references these token names, so re-valuing them re-skins the whole mockup set with no
     markup change. New screens use the fuller dna.css component layer (same palette). */
  --color-background-primary:#FFFFFF;
  --color-background-secondary:#f8f9fa;    /* gray-0 — subtle surface (was warm paper) */
  --color-background-tertiary:#f1f3f5;     /* gray-1 */
  --color-background-info:#eef4fb;         /* ent-0 — nav-active / info tint */
  --color-background-danger:#ffe3e3;       /* red-0 */
  --color-background-success:#ebfbee;      /* green-0 */
  --color-background-warning:#fff9db;      /* yellow-0 */

  --color-text-primary:#212529;           /* gray-9 body text */
  --color-text-secondary:#343a40;         /* gray-8 — headers/labels */
  --color-text-tertiary:#495057;          /* gray-7 — secondary */
  --color-text-info:#1c4f8c;              /* ent-8 — navy accent / links */
  --color-text-danger:#c92a2a;
  --color-text-success:#2b8a3e;
  --color-text-warning:#e67700;

  /* Borders are SOFT grey (never black) — hairlines that read but don't shout. */
  --color-border-tertiary:#e9ecef;        /* gray-2 — internal row/section separators */
  --color-border-secondary:#ced4da;       /* gray-4 — field / card / control outlines */
  --color-border-primary:#dee2e6;         /* gray-3 — default */
  --color-border-info:#1c4f8c;            /* ent-8 */
  --color-border-danger:#ffc9c9;          /* red-2 */
  --color-border-success:#b2f2bb;         /* green-2 */
  --color-border-warning:#ffe066;         /* yellow-3 */

  --font-sans:Helvetica,Arial,sans-serif;
  --font-mono:Menlo,Consolas,"Courier New",monospace;
  --font-serif:Georgia,"Times New Roman",serif;

  --border-radius-md:4px;                 /* Mantine defaultRadius "sm" */
  --border-radius-lg:8px;
  --border-radius-xl:12px;
}
*{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
html,body{ margin:0; }
body{
  font-family:var(--font-sans);
  color:var(--color-text-primary);
  background:#FFFFFF;
  line-height:1.5;
}
.page{ width:680px; margin:0 auto; padding:18px; box-sizing:border-box; }

input,select,textarea{
  font-family:inherit; font-size:13px; color:var(--color-text-primary);
  background:var(--color-background-primary);
  border:1px solid var(--color-border-secondary);
  border-radius:var(--border-radius-md);
  height:36px; padding:0 10px; box-sizing:border-box;
}
textarea{ height:auto; padding:8px 10px; line-height:1.5; }
button{
  font-family:inherit; font-size:13px; color:var(--color-text-primary);
  background:transparent;
  border:1px solid var(--color-border-secondary);
  border-radius:var(--border-radius-md);
  height:36px; padding:0 12px; cursor:pointer;
}
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ===== mockup shared button system — one semantic vocabulary used on EVERY screen =====
   ONE consistent convention: colour = PRIORITY, and every button carries a SHADE (no bare white).
     • primary   → solid blue fill, white text (the ONE main action on a screen)
     • secondary → light neutral fill, dark text (ordinary actions — the default)
     • danger    → light red fill, red text (destructive actions)
     • ghost     → no fill (bare icon buttons only)
   A uniform dashed "wired" ring (added by nav-bridge.js only when iframed) additionally marks the
   buttons that actually lead somewhere in the viewer. */
.mbtn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:32px; padding:0 13px;
  border-radius:var(--border-radius-md); font-size:12px; font-weight:500; box-sizing:border-box; white-space:nowrap;
  border:1px solid var(--color-border-secondary); background:#fff; color:var(--color-text-primary); cursor:default; }
.mbtn i{ font-size:15px; line-height:1; }
.mbtn.sm{ height:28px; padding:0 10px; font-size:11.5px; }
.mbtn.icon{ width:32px; padding:0; }
.mbtn.icon.sm{ width:28px; }
/* colour = PRIORITY (enterprise): primary = solid navy / white (the one main action) · secondary = white /
   dark with a soft border (ordinary actions) · danger = light red / red (destructive) · ghost = subtle.
   No tan, no black borders, medium (not heavy) weight — matches the ai-starter button system. */
.mbtn.primary{ background:#1c4f8c; border-color:#1c4f8c; color:#fff; }
.mbtn.secondary{ background:#fff; border-color:var(--color-border-secondary); color:var(--color-text-primary); }
.mbtn.danger{ background:#ffe3e3; border-color:#ffc9c9; color:#c92a2a; }
.mbtn.ghost{ background:#fff; border-color:var(--color-border-secondary); color:var(--color-text-tertiary); }
/* .is-wired (the shared clickable cue) is injected by nav-bridge.js so it shows ONLY where the
   button is actually live (iframed in the viewer); standalone/gallery stays clean. */