/* =========================================================================
   Design-Tokens — die eine Quelle der Wahrheit für das Octon-Design.
   Schriften self-hosted (kein Google-CDN) wegen DSGVO / Server-Standort DE.
   ========================================================================= */

/* --- Self-hosted Fonts (latin subset deckt deutsche Umlaute + ß ab) --- */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 600;            /* Variable Font: Achse 400–600 */
  font-display: swap;
  src: url('/static/fonts/Sora-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/SpaceMono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/SpaceMono-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Farb-Tokens (Octon-Brand). Pro Mandant via Inline-Style überschreibbar. --- */
:root {
  --bg: #FBFBFC;
  --ink: #18191B;
  --slate: #3A3D42;
  --grey: #6B7178;
  --muted: #AEB4BC;
  --hair: #E6E8EB;
  --hair2: #F0F1F3;
  --akzent: oklch(0.56 0.05 150);
  --akzent-dark: oklch(0.52 0.05 150);
  --grass: linear-gradient(to top, #173a26 0%, #2f6b43 55%, #4f9663 100%);
  --dark-bg: #18191B;
  --dark-text: #FBFBFC;

  --font-sans: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;
}

/* --- Base Reset --- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ink); color: var(--bg); }
textarea, input { font-family: var(--font-sans); }
textarea::placeholder, input::placeholder { color: var(--muted); }
a { color: inherit; }

/* --- Keyframes (aus der gelieferten Vorlage) --- */
@keyframes oct-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes oct-rowin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes oct-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.82); opacity: .45; } }
@keyframes oct-spin { to { transform: rotate(360deg); } }