/* PrueferPilot Design-Tokens
 *
 * Aufbau bewusst wie in Noturio (static/styles/tokens.css): dieselben
 * Variablennamen, damit man zwischen beiden Projekten wechseln kann, ohne
 * umzudenken.
 *
 * Die Hausfarbe ist Graphit mit Bernstein als Akzent -- und zwar aus einem
 * fachlichen Grund, nicht aus Geschmack: Die App fuehrt drei Zustandsfarben,
 * die im Pruefungsraum eindeutig sein muessen -- gruen heisst bestanden,
 * bernstein heisst laeuft, rot heisst nicht bestanden. Eine bunte Hausfarbe
 * kaeme einer davon zu nahe und schwaechte genau dieses Signal. Graphit ist
 * neutral und kollidiert mit keiner.
 *
 * Der Bernstein bleibt deshalb dem Zeichen und wenigen Akzenten vorbehalten,
 * wo er nichts bedeutet -- nie einem Zustand.
 *
 * Noturio ist Petrol, PrueferPilot ist Graphit: die beiden Apps soll man
 * unterscheiden koennen, ohne den Namen zu lesen.
 *
 * Wird in index.html VOR style.css eingebunden.
 */

:root {
  --bg: #f1f2f4;
  --card: #ffffff;
  --text: #1b1e23;
  --muted: #5f666f;
  --border: #e0e3e7;
  --border-soft: #eaecef;
  --surface: #fafbfc;
  --surface-2: #e7eaee;
  --hover: #f6f7f9;

  --primary: #2f353d;
  --primary-dark: #1b1e23;
  --ring: 0 0 0 3px rgba(47, 53, 61, .16);

  /* Zustandsfarben, vor allem fuer die Stoppuhr und die Bestehenspruefung. */
  --ok: #1c7a4a;
  --ok-weich: #e6f5ed;
  --warnung: #a8500f;
  --warnung-weich: #fdf1e4;
  --stopp: #9d2b2b;
  --stopp-weich: #fbeaea;

  /* Bernstein: Hausakzent des Zeichens. Bewusst NICHT fuer Zustaende --
     dafuer gibt es --warnung, und zwei Bedeutungen fuer dieselbe Farbe
     machen beide unlesbar. */
  --akzent: #e8a33d;
  --akzent-weich: #fbf0df;

  --shadow-sm: 0 1px 2px rgba(27, 30, 35, .07);
  --shadow-md: 0 8px 28px -10px rgba(27, 30, 35, .20);
  --radius: 16px;
}

body.dark {
  --bg: #101216;
  --card: #1a1d22;
  --text: #f3f4f6;
  --muted: #a8adb6;
  --border: #32363d;
  --border-soft: #272b31;
  --surface: #16191e;
  --surface-2: #24282f;
  --hover: #262a31;

  --primary: #c6cbd3;
  --primary-dark: #e3e6ea;
  --ring: 0 0 0 3px rgba(198, 203, 211, .24);

  --ok: #6ddba0;
  --ok-weich: #113626;
  --warnung: #f0b072;
  --warnung-weich: #3c2712;
  --stopp: #f28b8b;
  --stopp-weich: #3d1a1a;

  --akzent: #f0b45c;
  --akzent-weich: #35291a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, .55);
}

/* Von Noturios Shell-CSS vorausgesetzt: Verlauf fuer .btn.primary und die
   beiden Schleier im Seitenhintergrund. Eigene Werte, gleiche Namen. */
:root {
  --grad: linear-gradient(135deg, #23272e, #3c434d);
  --glow1: rgba(232, 163, 61, .06);
  --glow2: rgba(35, 39, 46, .05);
}
body.dark {
  --grad: linear-gradient(135deg, #3c434d, #565e6a);
  --glow1: rgba(232, 163, 61, .08);
  --glow2: rgba(198, 203, 211, .05);
}