/*
  Shell template: slate-signal (ALTERNATE)
  Deep Slate Chrome + Electric Sapphire & Emerald Signal + Outfit type.
  Same zone contract as color-tech — tenant-swappable later.
*/
html[data-shell-template="slate-signal"] {
  color-scheme: light;

  --ground: #f1f5f9;
  --bg: var(--ground);
  --paper: #ffffff;
  --sheet: #ffffff;
  --surface: #ffffff;

  --ink: #0f172a;
  --muted: #475569;

  --accent: #1d4ed8;
  --accent-deep: #1e40af;
  --accent-soft: #dbeafe;
  --accent-ink: #ffffff;
  --signal: #0d9488;
  --signal-soft: #ccfbf1;
  --warm: #d97706;
  --warm-soft: #fef3c7;
  --chrome: #090d16;
  --chrome-2: #1e293b;

  --line: #cbd5e1;
  --line-strong: #94a3b8;
  --radius: 10px;
  --radius-sm: 8px;

  --sans: "Outfit", "Figtree", -apple-system, BlinkMacSystemFont, sans-serif;
  --display: "Outfit", "Figtree", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --step-small: 0.875rem;
  --step-body: 1.03125rem;
  --step-lead: 1.25rem;
  --step-head: clamp(1.85rem, 3.4vw, 2.5rem);

  --mesh-a: color-mix(in srgb, var(--accent) 20%, transparent);
  --mesh-b: color-mix(in srgb, var(--signal) 18%, transparent);
  --mesh-c: color-mix(in srgb, var(--warm) 10%, transparent);
  --shadow-mock: 0 24px 52px rgba(15, 23, 42, 0.14), 0 0 0 1px color-mix(in srgb, var(--accent) 22%, var(--line));
  --shadow-fab: 0 10px 24px color-mix(in srgb, var(--accent) 32%, transparent);

  /* Header / Body / Footer zones */
  --header-bg: color-mix(in srgb, var(--surface) 95%, var(--accent-soft));
  --header-sheet: var(--header-bg);
  --header-ink: var(--ink);
  --header-muted: var(--muted);
  --header-accent: var(--accent);
  --header-accent-ink: var(--accent-ink);
  --header-border: var(--line);
  --header-font: var(--sans);
  --header-brand-size: clamp(1.45rem, 2.7vw, 1.85rem);
  --header-link-size: 0.96875rem;
  --header-pad-y: 0.9rem;
  --header-pad-x: 1.25rem;
  --logo-size: clamp(2.4rem, 4vw, 2.8rem);
  --logo-plate: var(--chrome);
  --logo-beam: #ffffff;
  --logo-joist: #38bdf8;

  --body-bg: var(--ground);
  --body-sheet: var(--sheet);
  --body-ink: var(--ink);
  --body-muted: var(--muted);
  --body-accent: var(--accent);
  --body-font: var(--sans);
  --body-display: var(--display);
  --body-size: var(--step-body);
  --body-head-size: var(--step-head);
  --body-line: var(--line);

  --footer-bg: color-mix(in srgb, var(--chrome) 4%, var(--ground));
  --footer-ink: var(--ink);
  --footer-muted: var(--muted);
  --footer-border: var(--line-strong);
  --footer-font: var(--sans);
  --footer-brand-size: clamp(1.65rem, 3.8vw, 2.1rem);
  --footer-link-size: 0.9375rem;
  --footer-pad-y: 2.25rem;

  /* Legacy aliases */
  --navy: var(--accent);
  --navy-2: var(--accent-deep);
  --mustard: var(--accent);
  --mustard-ink: var(--accent-ink);
  --link: var(--accent);
  --ok: #059669;
  --ok-bg: #d1fae5;
  --hold-bg: var(--warm-soft);
  --hold-ink: #92400e;
  --punch-bg: var(--signal-soft);
  --punch-ink: #0f766e;
  --danger: #dc2626;
}