/* System Designer palette and design tokens. Light on :root, dark on [data-theme="dark"] and,
   when the player chose "system", through prefers-color-scheme. */

:root {
  color-scheme: light;
  --bg: #F3F5FA;
  --bg-2: #E8ECF5;
  --canvas: #F6F8FC;
  --grid-dot: rgba(30, 41, 59, 0.10);
  --surface: rgba(255, 255, 255, 0.72);
  --surface-strong: rgba(255, 255, 255, 0.92);
  --surface-solid: #FFFFFF;
  --border: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.16);
  --text: #0E1525;
  --text-2: #3A4458;
  --text-3: #6B7486;
  --accent: #5146E5;
  --accent-2: #0E9F94;
  --accent-soft: rgba(81, 70, 229, 0.12);
  --ok: #138A4B;
  --warn: #B7791F;
  --hot: #D9622B;
  --bad: #C9372C;
  --info: #2563EB;
  --edge-idle: #C5CCDA;
  --edge-flow: #8A93A6;

  --cat-clients: #64748B;
  --cat-edge: #5146E5;
  --cat-compute: #0E9F94;
  --cat-data: #C47F12;
  --cat-messaging: #C2417E;
  --cat-platform: #7C3AED;
  --cat-ops: #15803D;
  --cat-ai: #A21CAF;
  --cat-external: #0369A1;

  --req-read: #0072B2;
  --req-write: #B86E00;
  --req-media: #A8538A;
  --req-trust: #00805C;
  --req-ai: #6A4BE8;
  --req-realtime: #2C8FC9;
  --req-background: #64748B;
  --req-attack: #C2410C;

  --icon-bg: #FFFFFF;
  --icon-fill: currentColor;
  --glow-hot: rgba(217, 98, 43, 0.35);

  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.08), 0 12px 32px rgba(15, 23, 42, 0.10);
  --shadow-3: 0 8px 24px rgba(15, 23, 42, 0.12), 0 24px 64px rgba(15, 23, 42, 0.16);

  --font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

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

  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 900ms;
  --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;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0E18;
  --bg-2: #111827;
  --canvas: #0C111D;
  --grid-dot: rgba(226, 232, 240, 0.07);
  --surface: rgba(20, 26, 42, 0.66);
  --surface-strong: rgba(24, 31, 50, 0.88);
  --surface-solid: #151B2C;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #E9EDF5;
  --text-2: #B7C0D1;
  --text-3: #8590A6;
  --accent: #8B85FF;
  --accent-2: #2DD4BF;
  --accent-soft: rgba(139, 133, 255, 0.16);
  --ok: #3DD68C;
  --warn: #F5B544;
  --hot: #FF8A4C;
  --bad: #FF6B6B;
  --info: #60A5FA;
  --edge-idle: #2A3347;
  --edge-flow: #46516A;

  --cat-clients: #94A3B8;
  --cat-edge: #8B85FF;
  --cat-compute: #2DD4BF;
  --cat-data: #F2B544;
  --cat-messaging: #F472B6;
  --cat-platform: #A78BFA;
  --cat-ops: #4ADE80;
  --cat-ai: #E879F9;
  --cat-external: #38BDF8;

  --req-read: #4FA8E8;
  --req-write: #F2B33D;
  --req-media: #E59AC6;
  --req-trust: #2FD1A0;
  --req-ai: #A794FF;
  --req-realtime: #8FD4FF;
  --req-background: #94A3B8;
  --req-attack: #FF7A3D;

  --icon-bg: #151B2C;
  --glow-hot: rgba(255, 138, 76, 0.45);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.5), 0 24px 64px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0A0E18;
    --bg-2: #111827;
    --canvas: #0C111D;
    --grid-dot: rgba(226, 232, 240, 0.07);
    --surface: rgba(20, 26, 42, 0.66);
    --surface-strong: rgba(24, 31, 50, 0.88);
    --surface-solid: #151B2C;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --text: #E9EDF5;
    --text-2: #B7C0D1;
    --text-3: #8590A6;
    --accent: #8B85FF;
    --accent-2: #2DD4BF;
    --accent-soft: rgba(139, 133, 255, 0.16);
    --ok: #3DD68C;
    --warn: #F5B544;
    --hot: #FF8A4C;
    --bad: #FF6B6B;
    --info: #60A5FA;
    --edge-idle: #2A3347;
    --edge-flow: #46516A;

    --cat-clients: #94A3B8;
    --cat-edge: #8B85FF;
    --cat-compute: #2DD4BF;
    --cat-data: #F2B544;
    --cat-messaging: #F472B6;
    --cat-platform: #A78BFA;
    --cat-ops: #4ADE80;
    --cat-ai: #E879F9;
    --cat-external: #38BDF8;

    --req-read: #4FA8E8;
    --req-write: #F2B33D;
    --req-media: #E59AC6;
    --req-trust: #2FD1A0;
    --req-ai: #A794FF;
    --req-realtime: #8FD4FF;
    --req-background: #94A3B8;
    --req-attack: #FF7A3D;

    --icon-bg: #151B2C;
    --glow-hot: rgba(255, 138, 76, 0.45);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.4);
    --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.5), 0 24px 64px rgba(0, 0, 0, 0.5);
  }
}

/* Reduced motion: no springs or slides; 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: 200ms; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  background-image: linear-gradient(160deg, var(--bg), var(--bg-2));
  background-attachment: fixed;
  color: var(--text);
  font: 400 15px/1.45 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; }