/* ConferVox design tokens – the single source for colour, type, space, shape and motion.
   Derived from the ConferVox design system (confervox.com, 16.10.2026) and the application
   wireframes "Runde A". Components never hard-code values; they read the roles below.

   Layers
   1. Primitives   brand colours and scales; components prefer the roles and reach for a primitive only for a fixed brand surface
   2. Roles        semantic tokens that switch with [data-theme] (light = work surface, dark = control room)
   Tenant branding of the participant view is applied through --aud-accent, --aud-bg and --aud-text (audience.css). */

/* ---------- 1. Primitives ---------- */
:root {
  --midnight: #081a33;
  --midnight-deep: #051020;
  --midnight-surface: #0e223f;
  --midnight-card: #132d52;
  --teal: #12b8b0;
  --teal-hover: #0ea39c;
  --teal-700: #0b7a75;
  --teal-light: #e6f8f7;
  --cyan: #25d6e8;
  --cloud: #f4f8fa;
  --white: #ffffff;
  --border: #e2e8f0;
  --ink: #111827;
  --ink-secondary: #374151;
  --muted: #64748b;
  --subtle: #94a3b8;

  --font-display: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Space: 4 px grid. Within a row 8–12, between rows 16, between sections 24–32, page margin 40 / 16. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --page-gutter: 2.5rem;
  --header-min-height: 4rem;
  --header-height: var(--header-min-height); /* measured and overridden at runtime by the sticky header */

  --radius-sm: 8px;
  --radius-field: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(8, 26, 51, 0.04);
  --shadow-md: 0 8px 24px rgba(8, 26, 51, 0.08);
  --shadow-lg: 0 16px 40px rgba(8, 26, 51, 0.12);
  --shadow-xl: 0 24px 60px rgba(8, 26, 51, 0.18);
  --shadow-btn: 0 4px 16px rgba(18, 184, 176, 0.28);

  /* Touch targets: 40 px desktop, 44 px on touch. */
  --tap: 2.5rem;

  /* Motion: critically damped by default, a little bounce only after momentum. See motion.css. */
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-press: 100ms;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}
@media (pointer: coarse) { :root { --tap: 2.75rem; } }
@media (max-width: 640px) { :root { --page-gutter: 1rem; } }

/* ---------- 2. Roles · light (work surface) ---------- */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: var(--cloud);
  --surface: var(--white);
  --surface-raised: #f8fafc;
  --heading: var(--midnight);
  --text: var(--ink);
  --text-secondary: var(--ink-secondary);
  --text-muted: var(--muted);
  --line: var(--border);
  --line-strong: #cbd5e1;
  --accent-text: var(--teal-700);
  --highlight: var(--teal-700);
  --focus: var(--midnight);
  --tint: var(--teal-light);
  --tint-text: var(--teal-700);
  --scrim: rgba(8, 26, 51, 0.55);

  --action: var(--teal);
  --action-hover: var(--teal-hover);
  --on-action: var(--midnight);
  --action-glow: var(--shadow-btn);

  --btn2-bg: var(--white);
  --btn2-fg: var(--midnight);
  --btn2-line: var(--border);
  --btn2-hover: var(--cloud);

  --ok: #0a6a65;     --ok-bg: #e6f8f7;    --ok-line: #8fd3ce;    --ok-icon: #0b7a75;
  --info: #1d4a85;   --info-bg: #eaf2fc;  --info-line: #a9c4ea;  --info-icon: #2a5ea8;
  --warn: #7a4300;   --warn-bg: #fff4de;  --warn-line: #e3b765;  --warn-icon: #b86e00;
  --err: #a8201a;    --err-bg: #fdecea;   --err-line: #eea59d;   --err-icon: #c0281f;
  --unk: #3f4c5e;    --unk-bg: #f1f5f9;   --unk-line: #94a3b8;   --unk-icon: #64748b;
  --err-solid: #c0281f;
}

/* ---------- 2. Roles · dark (control room, "Regie-Modus") ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--midnight);
  --surface: var(--midnight-surface);
  --surface-raised: var(--midnight-card);
  --heading: var(--white);
  --text: var(--white);
  --text-secondary: #e2e8f0;
  --text-muted: #a9b6c8;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.24);
  --accent-text: var(--teal);
  --highlight: var(--cyan);
  --focus: var(--cyan);
  --tint: rgba(37, 214, 232, 0.12);
  --tint-text: var(--cyan);
  --scrim: rgba(5, 16, 32, 0.7);

  --btn2-bg: rgba(255, 255, 255, 0.08);
  --btn2-fg: var(--white);
  --btn2-line: rgba(255, 255, 255, 0.2);
  --btn2-hover: rgba(255, 255, 255, 0.14);

  --ok: #3fd3c9;     --ok-bg: rgba(18, 184, 176, 0.14);   --ok-line: rgba(63, 211, 201, 0.45);   --ok-icon: #3fd3c9;
  --info: #9cc2f5;   --info-bg: rgba(90, 150, 230, 0.16); --info-line: rgba(156, 194, 245, 0.45); --info-icon: #9cc2f5;
  --warn: #ffc866;   --warn-bg: rgba(245, 184, 74, 0.14); --warn-line: rgba(255, 200, 102, 0.5);  --warn-icon: #ffc866;
  --err: #ff9a8f;    --err-bg: rgba(255, 99, 85, 0.16);   --err-line: rgba(255, 154, 143, 0.6);   --err-icon: #ff7a6c;
  --unk: #c3cfdd;    --unk-bg: rgba(255, 255, 255, 0.06); --unk-line: rgba(195, 207, 221, 0.5);   --unk-icon: #a9b6c8;
}