/* ------------------------------------------------------------------ *
 * Ole-Look fuer die Twenty-Oberflaeche
 *
 * Twenty kennt keine Theme-Einstellung: weder Akzentfarbe noch Schrift
 * lassen sich ueber Settings oder eine Env-Variable aendern (geprueft in
 * v2.32.0 - Settings-Bundles, 993 Design-Tokens, komplette
 * Config-Variablen-Liste). Die gesamte Oberflaeche haengt aber an
 * CSS-Variablen `--t-*`, die in `.light` bzw. `.dark` gesetzt werden.
 * Diese Datei ueberschreibt genau die Tokens, die die Marke ausmachen -
 * eingehaengt von `theme/inject.sh` beim Start des Servercontainers.
 *
 * Selektor `html.light` statt `.light`: hoehere Spezifitaet, damit auch
 * die `@supports (color: color(display-p3 ...))`-Varianten von Twenty
 * ueberschrieben werden, unabhaengig von der Reihenfolge.
 *
 * Bewusst NICHT angefasst:
 *   --t-color-blue*   die waehlbaren Optionsfarben (blau muss blau bleiben)
 *   --t-font-color-*  Textfarben (Kontrast ist geprueft und gut)
 *   --t-tag-*         Tag-Farben der SELECT-Felder
 *
 * Quelle der Farben: ~/Documents/ole.de/DESIGN_SYSTEM.md
 *   Tannengruen #223A26 (Marke) · warmes Off-White #F2F0ED (Grund) ·
 *   weisse Karten darauf · runde Ecken · Juneau Variable
 * ------------------------------------------------------------------ */

@font-face {
  font-family: 'Juneau Variable';
  src: url('/assets/ole/Juneau-Variable.woff2') format('woff2-variations'),
       url('/assets/ole/Juneau-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Juneau Variable';
  src: url('/assets/ole/Juneau-Variable-Italic.woff2') format('woff2-variations'),
       url('/assets/ole/Juneau-Variable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Schrift und Radien gelten in beiden Modi ------------------------- */
html.light,
html.dark {
  --t-font-family: 'Juneau Variable', Inter, sans-serif;

  /* Ole ist deutlich runder als Twenty (Basis 16px statt 8px).
     Moderat uebernommen, damit dichte Tabellen lesbar bleiben. */
  --t-border-radius-xs: 3px;
  --t-border-radius-sm: 6px;
  --t-border-radius-md: 12px;
  --t-border-radius-lg: 18px;
  --t-border-radius-xl: 24px;
  --t-border-radius-sm-round: 6px;
  --t-border-radius-md-round: 12px;
}

/* `body` traegt in Twentys Global-Style ein hartes `Inter, sans-serif` und
   nicht das Token - alles, was seine Schrift erbt statt sie selbst zu setzen,
   waere sonst weiter Inter. */
body {
  font-family: var(--t-font-family);
}

/* Heller Modus - der durchgestaltete Modus von Ole ------------------ */
html.light {
  /* Akzent: aus dem Tannengruen abgeleitete 12er-Skala. Die Helligkeit
     der Twenty-Blaustufen bleibt erhalten, nur Farbton und Saettigung
     kommen von Ole - deshalb sitzen Auswahl, Hover und Fokus weiter
     dort, wo Twenty sie erwartet. */
  --t-accent-accent1: #fcfdfc;
  --t-accent-accent2: #f9fbf9;
  --t-accent-accent3: #f3f7f4;
  --t-accent-accent4: #edf3ee;
  --t-accent-accent5: #e3ede5;
  --t-accent-accent6: #dae7dd;
  --t-accent-accent7: #c9d9cc;
  --t-accent-accent8: #b6c9b9;
  --t-accent-accent9: #223a26;   /* die Marke - Primaerflaechen */
  --t-accent-accent10: #1c3120;  /* Hover darauf */
  --t-accent-accent11: #2f5035;  /* Text auf hellem Gruen */
  --t-accent-accent12: #17261a;

  --t-accent-primary: #e3ede5;
  --t-accent-secondary: #e3ede5;
  --t-accent-tertiary: #f3f7f4;
  --t-accent-quaternary: #f9fbf9;
  --t-accent-accent3570: #b6c9b9;
  --t-accent-accent4060: #b6c9b9;

  --t-border-color-blue: #c9d9cc;
  --t-background-transparent-blue: #223a2612;

  /* Flaechen: warmer Grund, weisse Karten darauf - das zentrale
     Flaechenkonzept der Ole-App. `primary` bleibt reines Weiss. */
  --t-background-primary: #ffffff;
  --t-background-secondary: #f2f0ed;
  --t-background-tertiary: #e9e6e2;
  --t-background-quaternary: #dfdcd7;

  /* Linien leicht warm, damit sie auf dem beigen Grund nicht kalt wirken */
  --t-border-color-strong: #dad7d3;
  --t-border-color-medium: #e6e4e0;
  --t-border-color-light: #efeeeb;

  /* Primaerflaeche: Twenty nimmt dafuer nicht den Akzent, sondern die
     "invertierte" Flaeche (#333) - das sind die Hauptbuttons und die
     Tooltips. Bei Ole sind beide das Tannengruen. */
  --t-background-primary-inverted: #223a26;
  --t-background-primary-inverted-hover: #2f5035;

  /* Das semantische Blau ist Twentys Interaktionsfarbe: Fokusrahmen,
     Auswahl, Erwaehnungen - 67 Stellen in der Oberflaeche. Bliebe es blau,
     leuchtete in einer gruenen Oberflaeche staendig ein blauer Rahmen auf.
     Die Tag-Farben der SELECT-Felder haengen an eigenen Tokens
     (`--t-tag-*`) und bleiben unberuehrt: "Blau" bleibt dort blau. */
  --t-color-blue: #223a26;
  --t-color-blue1: #fcfdfc;
  --t-color-blue2: #f9fbf9;
  --t-color-blue3: #f3f7f4;
  --t-color-blue4: #edf3ee;
  --t-color-blue5: #e3ede5;
  --t-color-blue6: #dae7dd;
  --t-color-blue7: #c9d9cc;
  --t-color-blue8: #b6c9b9;
  --t-color-blue9: #223a26;
  --t-color-blue10: #1c3120;
  --t-color-blue11: #2f5035;
  --t-color-blue12: #17261a;

  --t-color-transparent-blue1: #1c5f2802;
  --t-color-transparent-blue2: #1c5f2808;
  --t-color-transparent-blue3: #1c5f2812;
  --t-color-transparent-blue4: #1c5f281e;
  --t-color-transparent-blue5: #1c5f282d;
  --t-color-transparent-blue6: #1c5f283e;
  --t-color-transparent-blue7: #1c5f2854;
  --t-color-transparent-blue8: #1c5f2872;
  --t-color-transparent-blue9: #1c5f28c1;
  --t-color-transparent-blue10: #1c5f28cc;
  --t-color-transparent-blue11: #1c5f28c5;
  --t-color-transparent-blue12: #1c5f28e0;
}

/* Dunkler Modus - Ole hat dafuer kein Design, deshalb bewusst
   zurueckhaltend: dieselbe Gruenachse, Flaechen bleiben Twenty. */
html.dark {
  --t-accent-accent1: #151916;
  --t-accent-accent2: #18201a;
  --t-accent-accent3: #263b2a;
  --t-accent-accent4: #2f5035;
  --t-accent-accent5: #38613f;
  --t-accent-accent6: #42704b;
  --t-accent-accent7: #4f8259;
  --t-accent-accent8: #5f9569;
  --t-accent-accent9: #6eaa79;
  --t-accent-accent10: #82b58b;
  --t-accent-accent11: #c0ddc5;
  --t-accent-accent12: #e3f2e6;

  --t-accent-primary: #38613f;
  --t-accent-secondary: #38613f;
  --t-accent-tertiary: #263b2a;
  --t-accent-quaternary: #18201a;
  --t-accent-accent3570: #5f9569;
  --t-accent-accent4060: #5f9569;

  --t-border-color-blue: #4f8259;
  --t-background-transparent-blue: #6eaa7957;

  --t-color-blue: #6eaa79;
  --t-color-blue1: #151916;
  --t-color-blue2: #18201a;
  --t-color-blue3: #263b2a;
  --t-color-blue4: #2f5035;
  --t-color-blue5: #38613f;
  --t-color-blue6: #42704b;
  --t-color-blue7: #4f8259;
  --t-color-blue8: #5f9569;
  --t-color-blue9: #6eaa79;
  --t-color-blue10: #82b58b;
  --t-color-blue11: #c0ddc5;
  --t-color-blue12: #e3f2e6;

  --t-color-transparent-blue1: #59c06c0f;
  --t-color-transparent-blue2: #59c06c17;
  --t-color-transparent-blue3: #59c06c3c;
  --t-color-transparent-blue4: #59c06c57;
  --t-color-transparent-blue5: #59c06c6b;
  --t-color-transparent-blue6: #59c06c7c;
  --t-color-transparent-blue7: #59c06c90;
  --t-color-transparent-blue8: #59c06cac;
  --t-color-transparent-blue9: #59c06cdb;
  --t-color-transparent-blue10: #59c06ce3;
  --t-color-transparent-blue11: #c0ddc5;
  --t-color-transparent-blue12: #e3f2e6;
}

/* Der erste Anstrich vor dem Laden der App steht inline in index.html
   und liest diese beiden Variablen - sonst blitzt kurz Twenty-Weiss auf. */
:root {
  --theme-light-background-secondary: #f2f0ed;
}