/*
 * tokens.css — Design-Token von LUFTSCHLOSS OS. Werte aus den MATTERN-Tools
 * (Loop/Marka/ao: --fs, --sp, Bar-Farben) plus iOS-15-Masse.
 */
:root {
  --fs: 16px;
  --sp: 8px;

  --fs-xs: calc(var(--fs) * 0.75);
  --fs-sm: calc(var(--fs) * 0.875);
  --fs-md: var(--fs);
  --fs-lg: calc(var(--fs) * 1.25);
  --fs-xl: calc(var(--fs) * 2);

  --sp-1: calc(var(--sp) * 0.5);
  --sp-2: var(--sp);
  --sp-3: calc(var(--sp) * 1.5);
  --sp-4: calc(var(--sp) * 2);
  --sp-6: calc(var(--sp) * 3);
  --sp-8: calc(var(--sp) * 4);

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --bar-bg: rgba(0, 0, 0, 0.6);
  --bar-fg: #ffffff;
  --bar-fg-dim: rgba(255, 255, 255, 0.6);
  --bar-fg-faint: rgba(255, 255, 255, 0.35);
  --bar-border: rgba(255, 255, 255, 0.15);
  --bar-hover: rgba(255, 255, 255, 0.12);
  --bar-active: rgba(255, 255, 255, 0.22);
  --bar-danger: rgba(255, 90, 90, 0.9);

  --ok: #30d158;
  --warn: #ff9f0a;
  --accent: #0a84ff;

  --glass-bg: rgba(40, 40, 44, 0.42);
  --glass-strong: rgba(28, 28, 30, 0.78);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur: blur(28px) saturate(160%);

  --surface-0: #000000;
  --surface-1: #1c1c1e;
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;
  --separator: rgba(84, 84, 88, 0.6);
  --text-2: #8e8e93;

  --icon-size: 84px;
  --slot: 132px;
  --slot-gap: 20px;
  --grid-max-cols: 5;
  --dock-icon: 58px;
  /* Beschriftung unter den Dock-Icons (Abstand + Zeile) */
  --dock-label: 18px;
  --dock-space: 134px;
  /* Abstand Dock/Widget ueber der Impressum-Zeile */
  --footer-space: 30px;

  --transition-fast: 120ms ease;
  --transition-mid: 240ms ease;
  --transition-app: 380ms cubic-bezier(0.2, 0.9, 0.25, 1);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --statusbar-h: 44px;
  --appbar-h: 52px;
  --gutter: 16px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (max-width: 720px) {
  :root {
    --icon-size: 64px;
    --slot: 78px;
    --slot-gap: 14px;
    --dock-icon: 50px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: var(--font);
  font-size: var(--fs-md);
  color: var(--bar-fg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

a {
  color: var(--accent);
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}