/* ScriptSaver App-Theme: Kinetic (Dark Standard, Light als Alternative).
   Designentscheidung: docs/design/app-kinetic/decision.md.
   Diese Datei wird NACH styles.css, feedback-and-review-layer.css und
   agent-runtime.css geladen. Sie definiert die semantischen Kinetic-Tokens
   und bildet die bisherigen Legacy-Variablen (u.a. den "Stitch reference
   implementation layer" in styles.css) auf diese Tokens ab, damit die
   gesamte eingeloggte App sofort dunkel und aus einem Guss wirkt, ohne dass
   jede Komponente einzeln umgebaut werden muss. Farb- und Schrifttokens
   ausschliesslich; Breiten, Gutter und Radien der bestehenden Navigation
   (siehe QL-091/QL-092 in docs/quality/quality-learning-register.md) werden
   hier bewusst nicht angefasst. */

@font-face{font-family:"Manrope";src:url("/static/fonts/manrope-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";src:url("/static/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------------------------------------------------------------------
   Dark (default). No data-theme attribute, or data-theme="dark", or an
   invalid/unknown value all resolve here first because this is the plain
   :root block; the light block below only applies when the attribute is
   present and exactly "light".
   --------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Semantic Kinetic tokens */
  --k-bg: #0f1211;
  --k-surface: #161a18;
  --k-surface-2: #1c211f;
  --k-line: #2b322e;
  --k-text: #eef0ea;
  --k-muted: #a6aea7;
  --k-accent: #c8f24a;
  --k-accent-ink: #101410;
  /* Deep, accent-tinted, white-text-safe background for filled primary
     actions; the plain --k-accent is too light for the hardcoded white
     button label still used by legacy .button-primary rules. */
  --k-accent-strong: #243d10;
  --k-focus: #c8f24a;
  --k-success: #8fe3a0;
  --k-warning: #ffcf7a;
  --k-danger: #ff9f96;
  --k-info: #c7d2ff;
  --k-paper: #f4f3ee;
  --k-paper-ink: #1b1f1c;

  /* Filled from literal colors by scripts/kinetic_color_tokens.py: a surface
     that stays dark in both themes (white ink on it stays legible) and the
     tinted state surfaces behind success/warning/danger/info copy. */
  --k-contrast-bg: #0b0e0d;
  --k-success-bg: #27362b;
  --k-warning-bg: #373326;
  --k-danger-bg: #372d2a;
  --k-info-bg: #2f3438;

  /* Radius scale: sharp by default, small radii for repeated work cards,
     pill only for status chips (see docs/design/product-ui-principles.md). */
  --k-radius-0: 0px;
  --k-radius-2: 2px;
  --k-radius-4: 4px;
  --k-radius-pill: 999px;

  /* Spacing scale on a 4px grid. */
  --k-space-1: 4px;
  --k-space-2: 8px;
  --k-space-3: 12px;
  --k-space-4: 16px;
  --k-space-5: 24px;
  --k-space-6: 32px;
  --k-space-7: 48px;
  --k-space-8: 64px;

  --k-font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --k-font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  /* --- Legacy bridge: generic base tokens (styles.css :root, ~line 9/1108/2260) --- */
  --bg: var(--k-bg);
  --bg-2: var(--k-surface);
  --surface: var(--k-surface);
  --surface-strong: var(--k-surface-2);
  --border: var(--k-line);
  --border-soft: var(--k-line);
  --text: var(--k-text);
  --text-soft: var(--k-text);
  --muted: var(--k-muted);
  --muted-2: var(--k-muted);
  --accent: var(--k-accent);
  --accent-bg: var(--k-accent);
  --accent-hover: var(--k-accent);
  --danger: var(--k-danger);
  --success: var(--k-success);
  --paper: var(--k-paper);

  /* --- Legacy bridge: "Stitch reference implementation layer" (styles.css ~line 9829) --- */
  --stitch-primary: var(--k-accent-strong);
  --stitch-primary-soft: var(--k-surface-2);
  --stitch-primary-muted: var(--k-muted);
  --stitch-bg: var(--k-bg);
  --stitch-surface: var(--k-surface);
  --stitch-surface-low: var(--k-surface);
  --stitch-surface-mid: var(--k-surface-2);
  --stitch-surface-high: var(--k-surface-2);
  --stitch-paper: var(--k-paper);
  --stitch-text: var(--k-text);
  --stitch-muted: var(--k-muted);
  --stitch-outline: var(--k-line);
  --stitch-outline-strong: var(--k-line);
  --stitch-sidebar-bg: var(--k-surface-2);
  --stitch-sidebar-line: var(--k-line);
  --stitch-sidebar-text: var(--k-text);
  --stitch-sidebar-muted: var(--k-muted);
  --stitch-sidebar-active: rgba(200, 242, 74, .16);
  --stitch-sidebar-hover: rgba(255, 255, 255, .06);
  --stitch-sidebar-accent: var(--k-accent);
  --stitch-green: var(--k-success);
  --stitch-green-bg: rgba(143, 227, 160, .16);
  --stitch-amber: var(--k-warning);
  --stitch-amber-bg: rgba(255, 207, 122, .16);
  --stitch-rose: var(--k-danger);
  --stitch-rose-bg: rgba(255, 159, 150, .16);
  --stitch-ui: var(--k-font-sans);
  --stitch-sans: var(--k-font-sans);
  --stitch-mono: var(--k-font-mono);
}

/* ---------------------------------------------------------------------
   Light: explicit, persisted alternative. Only applies with a valid
   data-theme="light" attribute on <html>, set server-side (see
   modules/account_settings: resolve_theme / theme_from_request); every other value stays dark above.
   --------------------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  --k-bg: #f4f3ee;
  --k-surface: #ffffff;
  --k-surface-2: #eceee7;
  --k-line: #d8d9d2;
  --k-text: #1b1f1c;
  --k-muted: #565f58;
  /* Darker than the dark-mode accent on purpose so text and icons drawn in
     the accent color keep AA contrast on a light surface. */
  --k-accent: #3b6414;
  --k-accent-ink: #f4f3ee;
  --k-accent-strong: #345c14;
  --k-focus: #3b6414;
  --k-success: #146c34;
  --k-warning: #8a5a06;
  --k-danger: #a3221a;
  --k-info: #1d4ed8;
  --k-paper: #ffffff;
  --k-paper-ink: #1b1f1c;

  --k-contrast-bg: #1b1f1c;
  --k-success-bg: #e4f1e6;
  --k-warning-bg: #f7ecd6;
  --k-danger-bg: #f8e1de;
  --k-info-bg: #e8edf4;

  --bg: var(--k-bg);
  --bg-2: var(--k-surface);
  --surface: var(--k-surface);
  --surface-strong: var(--k-surface-2);
  --border: var(--k-line);
  --border-soft: var(--k-line);
  --text: var(--k-text);
  --text-soft: var(--k-text);
  --muted: var(--k-muted);
  --muted-2: var(--k-muted);
  --accent: var(--k-accent);
  --accent-bg: var(--k-accent);
  --accent-hover: var(--k-accent);
  --danger: var(--k-danger);
  --success: var(--k-success);
  --paper: var(--k-paper);

  --stitch-primary: var(--k-accent-strong);
  --stitch-primary-soft: var(--k-surface-2);
  --stitch-primary-muted: var(--k-muted);
  --stitch-bg: var(--k-bg);
  --stitch-surface: var(--k-surface);
  --stitch-surface-low: var(--k-surface);
  --stitch-surface-mid: var(--k-surface-2);
  --stitch-surface-high: var(--k-surface-2);
  --stitch-paper: var(--k-paper);
  --stitch-text: var(--k-text);
  --stitch-muted: var(--k-muted);
  --stitch-outline: var(--k-line);
  --stitch-outline-strong: var(--k-line);
  --stitch-sidebar-bg: var(--k-surface-2);
  --stitch-sidebar-line: var(--k-line);
  --stitch-sidebar-text: var(--k-text);
  --stitch-sidebar-muted: var(--k-muted);
  --stitch-sidebar-active: rgba(74, 122, 30, .12);
  --stitch-sidebar-hover: rgba(0, 0, 0, .05);
  --stitch-sidebar-accent: var(--k-accent);
  --stitch-green: var(--k-success);
  --stitch-green-bg: rgba(20, 108, 52, .12);
  --stitch-amber: var(--k-warning);
  --stitch-amber-bg: rgba(138, 90, 6, .12);
  --stitch-rose: var(--k-danger);
  --stitch-rose-bg: rgba(163, 34, 26, .12);
  --stitch-ui: var(--k-font-sans);
  --stitch-sans: var(--k-font-sans);
  --stitch-mono: var(--k-font-mono);
}

/* Body copy moves to Manrope. The Material Symbols icon font keeps its own
   font-family declared on .material-symbols-outlined (styles.css ~line
   9880), which wins on specificity regardless of load order, so icon
   glyphs and the local data-fallback-icon contract (QL-088/QL-093) stay
   completely unaffected by this rule. */
body {
  font-family: var(--k-font-sans), system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Literal colors in styles.css, feedback-and-review-layer.css and
   agent-runtime.css are mapped onto the tokens above by
   scripts/kinetic_color_tokens.py (see docs/design/app-kinetic/decision.md);
   a per-selector override list here did not converge and was removed. */

/* Theme choice on /account/settings: two compact segmented options instead
   of the generic full-width form-control styling radios would otherwise get. */
.account-theme-options {
  display: inline-flex;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-4);
  background: var(--k-surface-2);
}

.account-theme-form .account-theme-option {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-2);
  min-height: 40px;
  padding: 0 var(--k-space-4);
  color: var(--k-text);
  font-weight: 700;
  cursor: pointer;
}

.account-theme-form .account-theme-option + .account-theme-option {
  border-left: 1px solid var(--k-line);
}

.account-theme-option input[type="radio"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--k-accent);
}

.account-theme-option:has(input:checked) {
  background: var(--k-surface);
  box-shadow: inset 0 -2px 0 var(--k-accent);
}

.account-theme-option:has(input:focus-visible) {
  outline: 2px solid var(--k-focus);
  outline-offset: -2px;
}

/* Manrope's taller line box no longer fits the global select padding inside
   the reader toolbar's fixed 40px controls; the label was clipped at the
   bottom. A fixed-height select centres its text by itself. */
.reader-toolbar select {
  padding-top: 0;
  padding-bottom: 0;
  line-height: normal;
}