/* System Designer palette and design tokens: a warm neo-brutalist workbench. Cream cards, 2px ink outlines and hard offset
   shadows, no gradients, one light theme. Space Grotesk for text, Space Mono for labels and readouts. */

:root {
  color-scheme: light;
  --paper: #FFF4E0;
  --card: #FFFCF4;
  --ink: #141414;
  --tomato: #FF5B3A;
  --blue: #2D5BFF;
  --yellow: #FFC93C;
  --mint: #7FD9A8;

  --bg: #FFF4E0;
  --bg-2: #F7E7C6;
  --canvas: #FFFCF4;
  --grid-dot: rgba(20, 20, 20, 0.2);
  --surface: #FFFCF4;
  --surface-strong: #FFFFFF;
  --surface-solid: #FFFCF4;
  --border: #D9CFBB;
  --border-strong: #141414;
  --text: #141414;
  --text-2: #33312C;
  --text-3: #55514A;
  --accent: #2850F5;
  --accent-2: #0F6B49;
  --accent-soft: #FFE59A;
  --ok: #17663A;
  --warn: #7A4B00;
  --hot: #A33D0E;
  --bad: #B3261E;
  --info: #2850F5;
  --edge-idle: #55514A;
  --edge-flow: #1F45D6;

  --cat-clients: #55514A;
  --cat-edge: #3B4FB8;
  --cat-compute: #0F6B49;
  --cat-data: #7A4B00;
  --cat-messaging: #8F3F5C;
  --cat-platform: #5B46A8;
  --cat-ops: #17663A;
  --cat-ai: #7A3F8C;
  --cat-external: #1F5F86;

  --req-read: #2346D6;
  --req-write: #7A4B00;
  --req-media: #9A3A72;
  --req-trust: #0A6A4B;
  --req-ai: #5B3FD6;
  --req-realtime: #156A9C;
  --req-background: #55514A;
  --req-attack: #B5330A;

  --icon-bg: #FFFCF4;
  --icon-fill: currentColor;
  --glow-hot: rgba(255, 91, 58, 0);

  --line: 2px solid var(--ink);
  --shadow-1: 2px 2px 0 var(--ink);
  --shadow-2: 4px 4px 0 var(--ink);
  --shadow-3: 8px 8px 0 var(--ink);
  --hard: 4px 4px 0 var(--ink);
  --hard-lg: 6px 6px 0 var(--ink);

  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace;

  --radius-1: 6px;
  --radius-2: 8px;
  --radius-3: 10px;
  --radius-4: 14px;

  --dur-1: 120ms;
  --dur-2: 160ms;
  --dur-3: 240ms;
  --dur-4: 600ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --z-canvas: 0;
  --z-hud: 10;
  --z-panel: 20;
  --z-drawer: 30;
  --z-modal: 40;
  --z-toast: 50;
}

/* Reduced motion: no slides or movement; fades only, capped at 120 ms. */
:root[data-motion="reduce"] {
  --dur-1: 0ms;
  --dur-2: 0ms;
  --dur-3: 0ms;
  --dur-4: 0ms;
  --dur-fade: 120ms;
}
:root:not([data-motion="reduce"]) { --dur-fade: 160ms; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 3px; }

:root { --on-accent: #FFFFFF; --on-cta: #141414; --cta: #FF5B3A; }

/* Shared written defense controls. */
.hp-defense-form,.hp-defense-model {font:16px/1.5 var(--font-ui)}
.hp-defense-form {display:grid;gap:16px;min-width:0}
.hp-defense-form > label {display:block;margin:0;font-weight:700}
.hp-defense-form .hp-defense-answer {display:block;width:100%;min-height:150px;height:auto;padding:12px;resize:vertical;font:16px/1.5 var(--font-ui)}
.hp-defense-model > h3:first-child {font:700 20px/1.3 var(--font-display);margin:0 0 16px}
.hp-defense-help {color:var(--text-2);font-size:15px;line-height:1.5}
.hp-defense-model {margin-top:20px;padding:16px;border:var(--line);border-radius:var(--radius-3);box-shadow:var(--shadow-1);background:var(--card);line-height:1.5}
.hp-defense-model[hidden] {display:none}
.hp-defense-checklist {margin:16px 0 0;padding:12px;border:var(--line);border-radius:var(--radius-3);min-width:0}
.hp-defense-point {display:flex;align-items:flex-start;gap:12px;padding:12px 4px;min-height:44px;cursor:pointer;line-height:1.5}
.hp-defense-point input {flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent)}