/*
 * Cortex theme for LeafWiki.
 *
 * Mounted read-only at /app/data/cortex.css and loaded via
 * LEAFWIKI_CUSTOM_STYLESHEET. Colors are Cortex's own tokens from
 * packages/ui/src/tokens.css, so the wiki reads as part of getcortex.org.
 *
 * HOW THIS WORKS — read before editing:
 *
 * LeafWiki (v0.12.0) is Tailwind v4 and defines its palette as HSL *component
 * triples without the hsl() wrapper* — `--background: 0 0% 100%` — consumed as
 * `hsl(var(--background))`. Overrides must use the same bare-triple form; a hex
 * value here produces an invalid color and the rule is dropped.
 *
 * LIGHT ONLY. The wiki is pinned to Cortex's light theme. LeafWiki's theme is
 * client state (localStorage `design-mode`, default `system`) with no server
 * setting, so three things enforce it together:
 *   1. LEAFWIKI_INJECT_CODE_IN_HEADER pins `design-mode` to light at boot.
 *   2. The toggle is hidden (bottom of this file) so nobody can un-pin it.
 *   3. `.dark` is redefined to the light palette, so even if the class lands
 *      the page still renders correctly.
 * Do not "restore" a .dark block with dark values — that reintroduces the
 * half-dark state this replaced.
 *
 * LeafWiki's own brand color is green; every --primary / --brand / --ring
 * below exists to make that Cortex violet instead.
 */

@import url('https://cdn.jsdelivr.net/npm/cal-sans@1.0.1/index.css');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

/* ── Palette — Cortex light tokens ──────────────────────────── */
/* `.dark` is listed alongside :root deliberately; see the header. */
:root,
.dark {
  color-scheme: light;

  --background: 240 14% 98%; /* #fafafb */
  --foreground: 240 33% 6%; /* #0b0b14 */
  --card: 0 0% 100%;
  --card-foreground: 240 33% 6%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 33% 6%;

  --primary: 263 70% 50%; /* #6d28d9 */
  --primary-foreground: 0 0% 100%;
  --brand: 263 70% 50%;
  --brand-dark: 263 70% 42%;
  --brand-light: 258 90% 66%; /* #8b5cf6 */
  --ring: 262 83% 58%; /* #7c3aed */

  --secondary: 240 14% 96%;
  --secondary-foreground: 240 33% 6%;
  --accent: 260 60% 96%;
  --accent-foreground: 240 33% 6%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 240 12% 91%; /* #e4e4ea */
  --input: 240 12% 84%; /* #cfcfd8 */
  --surface: 0 0% 100%;
  --surface-alt: 240 12% 96%; /* #f4f4f7 */
  --surface-border: 240 12% 91%;
  --page-surface: 0 0% 100%;

  --interface-text: 240 6% 35%; /* #52525e */
  --muted: 240 6% 35%;
  --muted-foreground: 240 6% 49%; /* #7a7a86 */

  --error: 0 84% 60%;
  --success: 160 84% 39%; /* #10b981 */
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 50%; /* #f59e0b */

  --tooltip: 260 60% 97%;
  --tooltip-border: 260 40% 85%;
  --markdown-toolbar: 240 12% 96%;
  --markdown-toolbar-border: 240 12% 91%;
  --markdown-toolbar-text: 240 6% 35%;

  --tree-node-hover: 260 50% 95%;
  --scrollbar-thumb: 240 12% 84%;
  --scrollbar-thumb-hover: 240 6% 49%;
  --table-header-border: 240 12% 91%;
  --avatar-bg: 260 40% 92%;
  --avatar-foreground: 240 6% 35%;
  --headline-anchor-icon: 240 6% 65%;
  --headline-anchor-icon-hover: 263 70% 50%;

  --radius: 10px;

  --cortex-font-display: 'Cal Sans', 'Geist', system-ui, sans-serif;
  --cortex-font-body: 'Geist', system-ui, -apple-system, sans-serif;
  --cortex-font-mono: 'Geist Mono', 'Fira Code', ui-monospace, monospace;
}

/* ── Typography ─────────────────────────────────────────────── */
html,
body {
  font-family: var(--cortex-font-body);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  font-family: var(--cortex-font-display);
  letter-spacing: -0.02em;
}

code,
kbd,
pre,
tt {
  font-family: var(--cortex-font-mono);
}

/* The site name sits next to the logo — Cortex sets it in the display face. */
.app-layout__header a[href$='/'] span,
.app-layout__header .site-name {
  font-family: var(--cortex-font-display);
  letter-spacing: -0.02em;
}

/* ── Chrome ─────────────────────────────────────────────────── */
/* Cortex's marketing nav is a flat white bar over a near-white page, with a
   single hairline rule rather than a shadow. Match that. */
.app-layout__header {
  background: hsl(var(--surface));
  border-bottom: 1px solid hsl(var(--border));
  box-shadow: none;
}

/* The mark is a rounded gradient tile in the app; keep its corners here. */
.app-layout__header img {
  border-radius: 8px;
}

/* ── Content ────────────────────────────────────────────────── */
/* Long-form docs read better a touch narrower than full width. */
.page-viewer__content {
  max-width: 78ch;
}

/* Section headings earn a rule — the manual's pages are long. */
.page-viewer__content h2 {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid hsl(var(--border));
}

/* Blockquotes are the manual's tip boxes (they replaced the old wiki's
   `tip:` field), so they get the accent treatment rather than a grey bar. */
.page-viewer__content blockquote {
  border-left: 2px solid hsl(var(--primary));
  background: hsl(var(--primary) / 0.07);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.85rem 1.15rem;
}

.page-viewer__content blockquote p:last-child {
  margin-bottom: 0;
}

.page-viewer__content kbd {
  background: hsl(var(--surface-alt));
  border: 1px solid hsl(var(--input));
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 0.15em 0.45em;
  font-size: 0.8em;
  white-space: nowrap;
}

.page-viewer__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
}

/* Wide tables and code must scroll inside their own box, never the page. */
.page-viewer__content pre,
.page-viewer__content table {
  overflow-x: auto;
}

.page-viewer__content table {
  display: block;
  max-width: 100%;
}

/* ── Light-mode lock ────────────────────────────────────────── */
/* The theme toggle is hidden rather than removed — it is LeafWiki's own
   component and there is no build-time flag for it. Selectors are
   deliberately broad so a markup change upstream does not silently bring it
   back; if the toggle reappears after an upgrade, add its new selector here.
   See the header of this file for the other two layers of the lock. */
.app-layout__header button[aria-label*='mode' i],
.app-layout__header button[aria-label*='theme' i],
.app-layout__header button[aria-label*='dark' i],
.app-layout__header button[aria-label*='light' i],
[data-testid='design-toggle'] {
  display: none !important;
}