/* 00-tokens - part of the former static/style.css.
 *
 * The stylesheet is split by area, but the split is mechanical: rules were
 * moved verbatim and NOT regrouped. The numeric prefix is the load order, and
 * that order is what preserves the cascade. A rule sits in the file its
 * original position fell into, so an area's rules are not all in its file and
 * a file is not only that area's rules.
 *
 * Do not reorder the <link> tags in static/index.html, and do not move a rule
 * between files: with 1,151 redeclarations and 1,886 !important in this
 * cascade, either can change which declaration wins.
 *
 * static/index.html and the PRECACHE list in static/sw.js must agree on this
 * order. tests/test_static_stylesheet_manifest.py and
 * tests/test_css_computed_style_snapshot.py fail if that drifts.
 */
/* ============================================ */
/* Odysseus UI — Consolidated Stylesheet        */
/* ============================================ */


/* ── Variables ──
 *
 * Theme-public variables (override via theme.js or custom themes):
 *   Core:     --bg, --fg, --panel, --border, --red
 *   Syntax:   --hl-keyword, --hl-string, --hl-comment, --hl-function,
 *             --hl-number, --hl-builtin, --hl-variable, --hl-params,
 *             --hl-bg, --hl-fg
 *   Accents:  --accent-primary, --accent-error (set by theme.js)
 *   Semantic: --color-error, --color-success, --color-warning, --color-danger,
 *             --color-accent, --color-muted, --color-muted-alt
 */

:root {
  /* Core palette */
  --bg: #282c34;
  --fg: #9cdef2;
  --panel: #111;
  --border: #355a66;
  --red: #e06c75;
  /* Were `var(--green)` / `var(--warn)` — self-referential, so they
     resolved to invalid and every site fell back to its own literal
     (or, for sites with no fallback, painted as transparent/inherit).
     Anchor them to real hex so the token layer actually works. */
  --green: #50fa7b;
  --warn: #f0ad4e;

  /* Syntax highlighting */
  --hl-bg: #1e2228;
  --hl-fg: #9cdef2;
  --hl-keyword: #c678dd;
  --hl-string: #e5c07b;
  --hl-comment: #828997;
  --hl-function: #61afef;
  --hl-number: #d19a66;
  --hl-builtin: #56b6c2;
  --hl-variable: #abb2bf;
  --hl-params: #a8c0d4;

  /* Semantic colors */
  --color-error: #ff4444;
  --color-error-light: #ff6666;
  --color-success: #4caf50;
  --color-warning: #f0ad4e;
  --color-danger: #c0392b;
  --color-recording: #ff3b30;
  --color-recording-hover: #d63031;
  --color-muted: #888;
  --color-muted-alt: #6b7280;
  --color-accent: #00aaff;
  --color-agent-active: #00ff00;
  --color-brand-blue: #3b82f6;
  --color-blind-orange: #ff9800;
  --color-save-green: var(--color-success);
  --color-link-hover: #66c7ff;
  --color-subheader: #6b8a94;
  --select-bg: var(--bg);
  --select-fg: var(--fg);
  --select-option-bg: color-mix(in srgb, var(--panel) 74%, var(--bg));
  --select-option-fg: var(--fg);
  --select-option-active-bg: color-mix(in srgb, var(--accent, var(--red)) 24%, var(--panel));
  /* Warm accent — used by the Goals/Today UI in Notes. Lives as a token so
     themes can override without touching the goal CSS. */
  --accent-warm: #d19a66;
}

:root.light {
  --bg: #f5f5f5;
  --fg: #2b2b2b;
  --panel: #fff;
  --border: #bbb;
  --hl-bg: #f9f9f9;
  --hl-fg: #2b2b2b;
  --hl-keyword: #7928a1;
  --hl-string: #986801;
  --hl-comment: #6a737d;
  --hl-function: #005cc5;
  --hl-number: #986801;
  --hl-builtin: #0070a0;
  --hl-variable: #383a42;
  --hl-params: #4a4f5c;
  --select-bg: #eaeaea;
  --select-fg: var(--fg);
  --select-option-bg: var(--panel);
  --select-option-fg: var(--fg);
  --select-option-active-bg: color-mix(in srgb, var(--red) 16%, var(--panel));
}

/* ── Reset & Base ── */

* { box-sizing: border-box; }
html, body { overflow-x: hidden; height: 100%; margin: 0; overscroll-behavior: none; }
body {
  background-color: var(--bg);
  color: var(--fg);
  /* Keep the base padding transition for older layout paths that still adjust
     the body directly. Edge docks reserve workspace room on the flex panes
     below so left + right docks can coexist without skewing the whole body. */
  transition: padding-left 160ms cubic-bezier(0.22, 0.61, 0.36, 1),
              padding-right 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
  font-family: var(--font-family, 'Fira Code', monospace);
  display: flex;
  height: 100%;
  height: 100dvh; /* dynamic viewport height — adapts when mobile keyboard opens */
  overflow: hidden;
}

/* Self-hosted Fira Code font */
@font-face { font-family: 'Fira Code'; font-weight: 300; font-style: normal; font-display: swap; src: url('/static/fonts/FiraCode-Light.woff2') format('woff2'); }
@font-face { font-family: 'Fira Code'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/FiraCode-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Fira Code'; font-weight: 600; font-style: normal; font-display: swap; src: url('/static/fonts/FiraCode-SemiBold.woff2') format('woff2'); }


/* Self-hosted OpenDyslexic — dyslexia-friendly accessibility font option (SIL OFL 1.1) */
@font-face { font-family: 'OpenDyslexic'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/OpenDyslexic-Regular.woff2') format('woff2'); }
@font-face { font-family: 'OpenDyslexic'; font-weight: 700; font-style: normal; font-display: swap; src: url('/static/fonts/OpenDyslexic-Bold.woff2') format('woff2'); }

/* Code block baseline */
pre, code, .hljs {
  font-size: 11px;
  line-height: 1.5;
}

/* Scrollbar styling */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: var(--panel);
  }
  ::-webkit-scrollbar-thumb {
    background-color: var(--red);
    border-radius: 4px;
    border: 2px solid var(--panel);
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--red) 80%, white);
  }
}

html {
  scrollbar-color: var(--red) var(--panel);
  scrollbar-width: thin;
}

/* Utility */
.red-text { color: var(--red); }

/* ── Density Overrides ── */

:root.density-compact { font-size: 13px; }
:root.density-compact .msg { padding: 6px 10px; margin-bottom: 4px; }
:root.density-compact .list-item { padding: 4px 8px; }
:root.density-compact .sidebar .section { padding: 0; }
:root.density-spacious { font-size: 16px; }
:root.density-spacious .msg { padding: 14px 18px; margin-bottom: 12px; }
:root.density-spacious .list-item { padding: 8px 12px; }
:root.density-spacious .sidebar .section { padding: 0; }