@import "tailwindcss";

/*
 * Design „Tresor“ (#002): Graphit-Flächen, eine Markenfarbe (Messing), Monospace für alles
 * Technische. Die Werte stehen als CSS-Variablen in :root, damit auch Inline-SVGs und
 * Stile ausserhalb von Tailwind dieselben Tokens nutzen; @theme reicht sie an Tailwind
 * weiter (bg-surface, text-muted, border-strong …).
 *
 * Es gibt bewusst nur den dunklen Modus. Ein heller folgt in einer eigenen Phase (PLAN §5).
 */
:root {
  --bg: #0d1013;
  --sidebar: #11151a;
  --surface: #151a1f;
  --raised: #1d232a;
  --border: #222930;
  --border-strong: #2a323b;
  --text: #e8ecef;
  --text-muted: #8b96a3;
  --accent: #f0b43c;
  --accent-soft: #3a2e14;
  --ok: #3cc9a7;
  --danger: #f2714b;
  --danger-soft: #2a1814;
  --danger-border: #6b3324;
  --info: #6aa8ff;

  --schrift-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --schrift-text: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --schrift-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --seitenleiste-breite: 248px;

  color-scheme: dark;
}

/* inline: Tailwind-Klassen verweisen auf die Variablen statt die Werte zu kopieren. */
@theme inline {
  --color-bg: var(--bg);
  --color-sidebar: var(--sidebar);
  --color-surface: var(--surface);
  --color-raised: var(--raised);
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);
  --color-text: var(--text);
  --color-muted: var(--text-muted);
  --color-accent: var(--accent);
  --color-accent-soft: var(--accent-soft);
  --color-ok: var(--ok);
  --color-danger: var(--danger);
  --color-danger-soft: var(--danger-soft);
  --color-danger-border: var(--danger-border);
  --color-info: var(--info);

  --font-display: var(--schrift-display);
  --font-sans: var(--schrift-text);
  --font-mono: var(--schrift-mono);

  --radius-karte: 16px;
  --radius-box: 12px;
  --radius-feld: 10px;
}

@layer base {
  html {
    background: var(--bg);
    color: var(--text);
    font-family: var(--schrift-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  body {
    min-height: 100dvh;
    background: var(--bg);
    font-size: 15px;
    line-height: 1.5;
  }

  h1,
  h2,
  h3 {
    font-family: var(--schrift-display);
    letter-spacing: -0.01em;
  }

  /* Fokus immer sichtbar und in Messing – auch auf Elementen ohne eigenen Fokusstil. */
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
  }

  ::selection {
    background: var(--accent-soft);
    color: var(--text);
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}