@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&family=Inter+Tight:wght@400;500&display=swap');
/* Docline — design tokens (shared by desk.html, akte.html, index.html)
   One token system; the page runs in data-theme="day".
   RULES
   1. Glass for chrome, solid for content. Clinical text never sits on glass (content floor: 0.90 opacity).
   2. Greyscale world, colour = signal (Tesla FSD):
        blue   = AI perceiving / acting right now (listening, understood tokens, "im Auftrag" receipts)
        violet = AI-authored content waiting for a human (drafts, proposals)
        amber  = attention (Ungeprüft, CAVE, Prüfen)            — always with ⚠ shape
        red-orange = microphone live (Mitschrift)               — always with ● / ■ + timer
        red    = clinical risk / deadline (Frist, H/L critical)
        green  = only the ✓ of a completed external act
      Primary actions are neutral — never blue.
   3. Signal hues ≥ 20° apart; text contrast ≥ 4.5:1 in both themes (measured on worst-case backdrop). */

:root {
  --font-sans: system-ui, -apple-system, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, sans-serif;
  --font-display: system-ui, -apple-system, 'SF Pro Display', 'Inter', 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-17: 17px;
  --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-34: 34px; --fs-44: 44px; --fs-56: 56px; --fs-88: 88px;
  --lh-tight: 1.12; --lh-snug: 1.3; --lh-body: 1.5;
  --tracking-caps: 0.08em;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-card: 24px; --r-plate: 16px; --r-xl: 28px; --r-pill: 999px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-press: 120ms; --t-fast: 160ms; --t-base: 220ms; --t-slow: 320ms; --t-enter: 420ms;

  /* z map */
  --z-canvas: 1; --z-card: 10; --z-chrome: 100; --z-capsule: 200; --z-sheet: 300; --z-float: 350; --z-toast: 400; --z-glow: 450; --z-pins: 500; --z-privacy: 600;

  /* chrome geometry (floating) */
  --chrome-gap: 12px; --topbar-h: 48px; --dock-w: 64px;
}

/* ───────────── base palette ───────────── */
:root, [data-theme="night"] {
  color-scheme: dark;
  --bg: #0e0f12;
  --bg-deep: #08090b;
  --grain-opacity: 0.03;

  --text-1: #f2f4f8;
  --text-2: rgba(232, 236, 244, 0.80);
  --text-3: rgba(232, 236, 244, 0.62);
  --text-inverse: #0b0d12;

  /* content (solid) */
  --plate: rgba(24, 26, 32, 0.94);               /* inner content plate of a card */
  --surface-1: rgba(22, 24, 30, 0.92);
  --surface-2: rgba(30, 33, 41, 0.96);
  --surface-sunken: rgba(255, 255, 255, 0.04);
  --surface-hover: rgba(255, 255, 255, 0.06);
  /* chrome (glass) */
  --glass: rgba(26, 29, 38, 0.52);
  --glass-strong: rgba(26, 29, 38, 0.70);
  --bezel: rgba(255, 255, 255, 0.06);            /* card glass fill */
  --glass-blur: 26px;
  --glass-sat: 170%;
  --rim: rgba(255, 255, 255, 0.14);
  --rim-bright: rgba(255, 255, 255, 0.38);

  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.15);
  --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 22px 50px -18px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 1px 0 rgba(255,255,255,0.06) inset, 0 40px 90px -20px rgba(0, 0, 0, 0.8), 0 8px 22px rgba(0, 0, 0, 0.45);
  --shadow-chrome: 0 14px 40px -12px rgba(0, 0, 0, 0.65);

  --primary-bg: #f2f4f8;
  --primary-fg: #0b0d12;
  --focus: rgba(242, 244, 248, 0.72);

  --accent: #7b96ff;            /* AI perceiving / acting */
  --accent-strong: #9aafff;
  --accent-soft: rgba(123, 150, 255, 0.16);
  --accent-contrast: #0b0d12;

  --ai: #c3a6ff;                /* AI-authored, awaiting human */
  --ai-soft: rgba(195, 166, 255, 0.12);
  --ai-line: rgba(195, 166, 255, 0.45);

  --warn: #f5cf4a;  --warn-text: #f5cf4a;  --warn-soft: rgba(245, 207, 74, 0.14);
  --rec: #ff8a3d;   --rec-soft: rgba(255, 138, 61, 0.14);
  --danger: #ff7a7a; --danger-text: #ff8f8f; --danger-soft: rgba(255, 122, 122, 0.14);
  --ok: #52d69a;    --ok-soft: rgba(82, 214, 154, 0.13);
}

/* ───────────── light palette ───────────── */
[data-theme="day"] {
  color-scheme: light;
  --bg: #e9edf4;
  --bg-deep: #dde3ee;
  --grain-opacity: 0.02;

  --text-1: #0d1117;
  --text-2: #3f4655;
  --text-3: #5f6675;
  --text-inverse: #ffffff;

  --plate: rgba(255, 255, 255, 0.95);
  --surface-1: rgba(255, 255, 255, 0.92);
  --surface-2: rgba(255, 255, 255, 0.98);
  --surface-sunken: rgba(15, 23, 42, 0.04);
  --surface-hover: rgba(15, 23, 42, 0.05);
  --glass: rgba(255, 255, 255, 0.38);
  --glass-strong: rgba(255, 255, 255, 0.62);
  --bezel: rgba(255, 255, 255, 0.42);
  --glass-blur: 30px;
  --glass-sat: 200%;
  --rim: rgba(255, 255, 255, 0.75);
  --rim-bright: rgba(255, 255, 255, 1);

  --line: rgba(15, 23, 42, 0.08);
  --line-strong: rgba(15, 23, 42, 0.14);
  --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --shadow-card: 0 1px 1px rgba(16, 24, 40, 0.04), 0 28px 56px -22px rgba(30, 41, 80, 0.30);
  --shadow-lift: 0 2px 4px rgba(16, 24, 40, 0.06), 0 44px 90px -24px rgba(30, 41, 80, 0.40);
  --shadow-chrome: 0 12px 34px -14px rgba(30, 41, 80, 0.28);

  --primary-bg: #0d1117;
  --primary-fg: #ffffff;
  --focus: rgba(13, 17, 23, 0.7);

  --accent: #2f5bff;
  --accent-strong: #1f47e0;
  --accent-soft: rgba(47, 91, 255, 0.10);
  --accent-contrast: #ffffff;

  --ai: #6d35e6;
  --ai-soft: rgba(109, 53, 230, 0.08);
  --ai-line: rgba(109, 53, 230, 0.40);

  --warn: #e0a800;  --warn-text: #7a5a00;  --warn-soft: rgba(245, 190, 20, 0.16);
  --rec: #b04a00;   --rec-soft: rgba(230, 110, 30, 0.12);
  --danger: #d93a45; --danger-text: #b42331; --danger-soft: rgba(217, 58, 69, 0.10);
  --ok: #148a55;    --ok-soft: rgba(20, 138, 85, 0.10);
}


/* ═════════════ Docline design language — light (Brimmo) ═════════════
   One light theme: a flat neutral grey field + white 40 % glass cards with inset highlights, Poppins, black text at 3 opacity levels.
   Signals: blue #1736f7 = people/links you can open & AI perceiving · orange #ee4d12 = attention · red #ee1212 = deadline.
   Single light theme; Shell sets data-theme="day". */
:root, [data-theme], [data-theme="day"] {
  color-scheme: light;
  --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-context: 'Inter Tight', 'Poppins', system-ui, sans-serif;
  --bg: #e0e0e0;
  --bg-deep: #e0e0e0;
  --grain-opacity: 0.015;

  --text-1: #000000;
  --text-2: rgba(0, 0, 0, 0.60);
  --text-3: rgba(0, 0, 0, 0.40);          /* secondary level (labels/eyebrows) */
  --text-sep: rgba(0, 0, 0, 0.20);        /* separators · */
  --text-inverse: #ffffff;

  --glass-a: 0.40;                         /* Glas setting: Klar .28 · Getönt .40 · Solide .72 (see below) */
  --glass-fill: rgba(255, 255, 255, 0.40); /* #ffffff66 — every glass card, pill and round control */
  --glass-card: var(--glass-fill);
  --glass-card-strong: rgba(255, 255, 255, 0.62);
  --glass-inset: inset 0 1px 0 rgba(255,255,255,0.40), inset 1px 0 0 rgba(255,255,255,0.32), inset 0 -1px 1px rgba(0,0,0,0.13), inset -1px 0 1px rgba(0,0,0,0.11);
  --plate: rgba(255, 255, 255, 0.40);
  --surface-1: rgba(255, 255, 255, 0.40);
  --surface-2: rgba(255, 255, 255, 0.92);
  --surface-sunken: rgba(0, 0, 0, 0.05);   /* #0000000d chips, icon wells, footers */
  --surface-hover: rgba(0, 0, 0, 0.07);
  --glass: var(--glass-fill);
  --glass-strong: rgba(255, 255, 255, 0.62);
  --bezel: transparent;
  --glass-blur: 2px;
  --glass-sat: 100%;
  --rim: rgba(255, 255, 255, 0.40);
  --rim-bright: rgba(255, 255, 255, 0.80);

  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.10);      /* #0000001a outlines */
  --line-dashed: rgba(0, 0, 0, 0.15);
  --edge-highlight: var(--glass-inset);
  --shadow-card: var(--glass-inset);
  --shadow-lift: var(--glass-inset), 0 24px 60px -24px rgba(0, 0, 0, 0.20);
  --shadow-chrome: var(--glass-inset);

  --primary-bg: #ffffff;
  --primary-fg: #000000;
  --focus: rgba(23, 54, 247, 0.55);

  --accent: #1736f7;
  --accent-strong: #0d2be5;
  --accent-soft: rgba(23, 54, 247, 0.08);
  --accent-contrast: #ffffff;

  --ai: #ae3bf0;                          /* KI drafts: rails, outlines, icons, fills */
  --ai-text: #9111da;                     /* small violet text — same hue, 5.4 : 1 on glass, 4.8 : 1 on the field */
  --ai-soft: rgba(174, 59, 240, 0.08);
  --ai-line: rgba(174, 59, 240, 0.50);

  --warn: #ee4d12;  --warn-text: #d23f08;  --warn-soft: rgba(238, 77, 18, 0.08);  --warn-line: rgba(238, 78, 18, 0.40);
  --rec: #ee4d12;   --rec-soft: rgba(238, 77, 18, 0.10);
  --danger: #ee1212; --danger-text: #d10c0c; --danger-soft: rgba(238, 18, 18, 0.08);
  --ok: #148a55;    --ok-soft: rgba(20, 138, 85, 0.10);

  --r-card: 28px; --r-plate: 22px; --r-pill: 99px;
  --topbar-h: 47px; --chrome-gap: 20px; --dock-w: 0px;
}

/* Glas setting (avatar menu → Klar / Getönt / Solide, html[data-glass]): only the white of the glass changes — text, layout and signals stay */
html[data-glass="clear"] { --glass-a: 0.28; --glass-fill: rgba(255, 255, 255, 0.28); }
html[data-glass="solid"] { --glass-a: 0.72; --glass-fill: rgba(255, 255, 255, 0.72); }
@media (prefers-reduced-transparency: reduce) {
  html:root, html[data-glass] { --glass-a: 0.72; --glass-fill: rgba(255, 255, 255, 0.72); }
}