/* DreamCatcher theme for LearnHouse.
 * GENERATED by theme/generate.py. Do not hand-edit; edit theme/tokens.json.
 * Injected by nginx sub_filter before </head>, so it loads after the app's
 * own stylesheets and wins on equal specificity without !important.
 */

/* 1. shadcn semantic tokens. Every component built on bg-background,
 *    text-foreground, bg-card, border-border etc. follows from here. */
:root {
  --background: 240 29% 6%;  /* #0b0b14 */
  --foreground: 43 26% 95%;  /* #f5f3ee */
  --card: 240 19% 10%;  /* #15151f */
  --card-foreground: 43 26% 95%;  /* #f5f3ee */
  --popover: 240 18% 13%;  /* #1c1c28 */
  --popover-foreground: 43 26% 95%;  /* #f5f3ee */
  --primary: 44 57% 51%;  /* #c9a43c */
  --primary-foreground: 240 29% 6%;  /* #0b0b14 */
  --secondary: 240 18% 13%;  /* #1c1c28 */
  --secondary-foreground: 43 26% 95%;  /* #f5f3ee */
  --muted: 240 19% 10%;  /* #15151f */
  --muted-foreground: 49 5% 58%;  /* #9a988f */
  --accent: 240 18% 13%;  /* #1c1c28 */
  --accent-foreground: 44 77% 66%;  /* #ebc968 */
  --destructive: 0 84% 60%;  /* #ef4444 */
  --destructive-foreground: 43 26% 95%;  /* #f5f3ee */
  --border: 240 14% 19%;  /* #2a2a38 */
  --input: 240 14% 19%;  /* #2a2a38 */
  --ring: 44 57% 51%;  /* #c9a43c */
}

/* 2. Upstream pins the background back to white under a dark preference
 *    (@media (prefers-color-scheme: dark){--background:0 0% 100%}). We
 *    cannot delete their rule, so we redeclare the query later in the
 *    cascade, where it wins. */
@media (prefers-color-scheme: dark) {
  :root {
    --background: 240 29% 6%;
    --foreground: 43 26% 95%;
    --card: 240 19% 10%;
    --popover: 240 18% 13%;
    --border: 240 14% 19%;
  }
}

/* 3. The load-bearing part. Inverting these ramps turns bg-gray-100 into a
 *    dark card and text-gray-900 into cream type across the entire app,
 *    including the dashboard, with no component edits. The values are
 *    violet-black to warm-cream rather than neutral grey, so the app
 *    inherits DreamCatcher's temperature instead of going flat. */
:root {
  --color-gray-50: #0b0b14;
  --color-gray-100: #15151f;
  --color-gray-200: #1c1c28;
  --color-gray-300: #23232f;
  --color-gray-400: #2a2a38;
  --color-gray-500: #6a685f;
  --color-gray-600: #9a988f;
  --color-gray-700: #cfcdc4;
  --color-gray-800: #e4e2db;
  --color-gray-900: #f5f3ee;
  --color-gray-950: #ffffff;
  --color-slate-50: #0b0b14;
  --color-slate-100: #15151f;
  --color-slate-200: #1c1c28;
  --color-slate-300: #23232f;
  --color-slate-400: #2a2a38;
  --color-slate-500: #6a685f;
  --color-slate-600: #9a988f;
  --color-slate-700: #cfcdc4;
  --color-slate-800: #e4e2db;
  --color-slate-900: #f5f3ee;
  --color-slate-950: #ffffff;
  --color-zinc-50: #0b0b14;
  --color-zinc-100: #15151f;
  --color-zinc-200: #1c1c28;
  --color-zinc-300: #23232f;
  --color-zinc-400: #2a2a38;
  --color-zinc-500: #6a685f;
  --color-zinc-600: #9a988f;
  --color-zinc-700: #cfcdc4;
  --color-zinc-800: #e4e2db;
  --color-zinc-900: #f5f3ee;
  --color-zinc-950: #ffffff;
  --color-neutral-50: #0b0b14;
  --color-neutral-100: #15151f;
  --color-neutral-200: #1c1c28;
  --color-neutral-300: #23232f;
  --color-neutral-400: #2a2a38;
  --color-neutral-500: #6a685f;
  --color-neutral-600: #9a988f;
  --color-neutral-700: #cfcdc4;
  --color-neutral-800: #e4e2db;
  --color-neutral-900: #f5f3ee;
  --color-neutral-950: #ffffff;
  --color-stone-50: #0b0b14;
  --color-stone-100: #15151f;
  --color-stone-200: #1c1c28;
  --color-stone-300: #23232f;
  --color-stone-400: #2a2a38;
  --color-stone-500: #6a685f;
  --color-stone-600: #9a988f;
  --color-stone-700: #cfcdc4;
  --color-stone-800: #e4e2db;
  --color-stone-900: #f5f3ee;
  --color-stone-950: #ffffff;

  /* One variable cannot be both a surface and a text colour under
   * inversion. It takes the surface role here (24 bg + 17 border rules
   * vs 15 text), and the text side is corrected in section 4. */
  --color-white: #15151f;

  /* Scrims must stay dark on a dark theme, so black keeps its value and
   * bg-black/NN modal backdrops are deliberately untouched. */
  --color-black: #000000;
}

/* 3b. Inverting the ramp is right at the light end (bg-white becomes a dark
 *     surface, text-gray-900 becomes cream) and WRONG at the dark end: a
 *     bg-gray-900 button turned pale, and since its label is text-white
 *     (also pale after inversion) the button rendered invisible. Invisible
 *     controls are the worst failure mode of a theme like this, so the
 *     dark-end background utilities are pinned back to dark surfaces.
 *
 *     Selectors are lifted verbatim from the app's compiled CSS rather than
 *     reconstructed, so every variant it actually ships (hover:, focus:,
 *     group-hover:, dark:, responsive) is covered without guesswork.
 *
 *     Primary CTAs get their gold from --primary in section 1, not from here.
 */
.active\:bg-neutral-600:active { background-color: #23232f; }
.bg-black { background-color: #1c1c28; }
.bg-gray-600 { background-color: #23232f; }
.bg-gray-700 { background-color: #23232f; }
.bg-gray-800 { background-color: #1c1c28; }
.bg-gray-900 { background-color: #1c1c28; }
.bg-neutral-600 { background-color: #23232f; }
.bg-neutral-700 { background-color: #23232f; }
.bg-neutral-800 { background-color: #1c1c28; }
.bg-neutral-900 { background-color: #1c1c28; }
.bg-neutral-950 { background-color: #15151f; }
.bg-slate-700 { background-color: #23232f; }
.bg-slate-800 { background-color: #1c1c28; }
.bg-slate-900 { background-color: #1c1c28; }
.bg-zinc-900 { background-color: #1c1c28; }
.bg-zinc-950 { background-color: #15151f; }
.dark\:bg-gray-700:is(.dark *) { background-color: #23232f; }
.dark\:bg-neutral-600:is(.dark *) { background-color: #23232f; }
.dark\:bg-neutral-700:is(.dark *) { background-color: #23232f; }
.dark\:bg-neutral-800:is(.dark *) { background-color: #1c1c28; }
.dark\:bg-neutral-900:is(.dark *) { background-color: #1c1c28; }
.dark\:bg-neutral-950:is(.dark *) { background-color: #15151f; }
.dark\:disabled\:bg-neutral-700:is(.dark *):disabled { background-color: #23232f; }
.dark\:hover\:bg-neutral-700:is(.dark *):hover { background-color: #23232f; }
.dark\:hover\:bg-neutral-800:is(.dark *):hover { background-color: #1c1c28; }
.disabled\:bg-neutral-700:disabled { background-color: #23232f; }
.disabled\:hover\:bg-slate-900:disabled:hover { background-color: #1c1c28; }
.enabled\:hover\:bg-slate-800:enabled:hover { background-color: #1c1c28; }
.group-hover\:bg-gray-800:is(:where(.group):hover *) { background-color: #1c1c28; }
.hover\:bg-black:hover { background-color: #1c1c28; }
.hover\:bg-gray-600:hover { background-color: #23232f; }
.hover\:bg-gray-700:hover { background-color: #23232f; }
.hover\:bg-gray-800:hover { background-color: #1c1c28; }
.hover\:bg-gray-900:hover { background-color: #1c1c28; }
.hover\:bg-neutral-600:hover { background-color: #23232f; }
.hover\:bg-neutral-700:hover { background-color: #23232f; }
.hover\:bg-neutral-800:hover { background-color: #1c1c28; }
.hover\:bg-neutral-900:hover { background-color: #1c1c28; }
.hover\:bg-slate-800:hover { background-color: #1c1c28; }
.selection\:bg-black ::selection,.selection\:bg-black::selection { background-color: #1c1c28; }

/* 3c. The mirror of 3b for the colour property. Shades 100-500 are tuned
 *     to be borders and surfaces, so using one as text lands around
 *     1.4:1 on the canvas. Anything a human reads is lifted to a
 *     readable tier; the border role keeps the dark value. Selectors are
 *     again lifted from the compiled CSS so variants come along free. */
.dark\:group-hover\:text-neutral-300:is(.dark *):is(:where(.group):hover *) { color: #9a988f; }
.dark\:hover\:text-neutral-300:is(.dark *):hover { color: #9a988f; }
.dark\:hover\:text-neutral-400:is(.dark *):hover { color: #9a988f; }
.dark\:placeholder\:text-neutral-500:is(.dark *)::placeholder { color: #9a988f; }
.dark\:text-neutral-200:is(.dark *) { color: #9a988f; }
.dark\:text-neutral-300:is(.dark *) { color: #9a988f; }
.dark\:text-neutral-400:is(.dark *) { color: #9a988f; }
.dark\:text-neutral-500:is(.dark *) { color: #9a988f; }
.disabled\:hover\:text-neutral-400:disabled:hover { color: #9a988f; }
.disabled\:hover\:text-slate-400:disabled:hover { color: #9a988f; }
.disabled\:text-gray-400:disabled { color: #9a988f; }
.group-hover\/item\:text-neutral-500:is(:where(.group\/item):hover *) { color: #9a988f; }
.group-hover\:text-gray-400:is(:where(.group):hover *) { color: #9a988f; }
.group-hover\:text-neutral-400:is(:where(.group):hover *) { color: #9a988f; }
.hover\:text-gray-300:hover { color: #9a988f; }
.hover\:text-gray-400:hover { color: #9a988f; }
.hover\:text-gray-500:hover { color: #9a988f; }
.hover\:text-neutral-300:hover { color: #9a988f; }
.hover\:text-neutral-400:hover { color: #9a988f; }
.hover\:text-neutral-500:hover { color: #9a988f; }
.placeholder-gray-400::placeholder { color: #9a988f; }
.placeholder-slate-400::placeholder { color: #9a988f; }
.placeholder\:text-gray-300::placeholder { color: #9a988f; }
.placeholder\:text-gray-400::placeholder { color: #9a988f; }
.placeholder\:text-neutral-300::placeholder { color: #9a988f; }
.placeholder\:text-neutral-400::placeholder { color: #9a988f; }
.text-gray-100 { color: #9a988f; }
.text-gray-200 { color: #9a988f; }
.text-gray-300 { color: #9a988f; }
.text-gray-400 { color: #9a988f; }
.text-gray-500 { color: #9a988f; }
.text-neutral-100 { color: #9a988f; }
.text-neutral-200 { color: #9a988f; }
.text-neutral-300 { color: #9a988f; }
.text-neutral-400 { color: #9a988f; }
.text-neutral-500 { color: #9a988f; }
.text-slate-300 { color: #9a988f; }
.text-slate-400 { color: #9a988f; }
.text-slate-500 { color: #9a988f; }
.text-zinc-100 { color: #9a988f; }

/* 3d. Tailwind arbitrary values, e.g. bg-[#f8f8f8]. These compile to a
 *     literal hex with no variable in between, so nothing above can reach
 *     them. The audit found them as full-page light panels across the
 *     dashboard with our cream type on top at 1.04:1. Detection is by
 *     computed luminance, not a fixed list, so a new arbitrary colour in a
 *     future release gets caught without editing this file. */
.\[\&\:\:-webkit-scrollbar-thumb\]\:bg-white\/10::-webkit-scrollbar-thumb { background-color: #0b0b14; }
.activity-editor-content-wrapper { background-color: #0b0b14; }
.activity-editor-content-wrapper .ProseMirror a { color: #f5f3ee; }
.activity-editor-content-wrapper .ProseMirror a:hover { color: #f5f3ee; }
.activity-editor-content-wrapper .ProseMirror pre .hljs-comment,.activity-editor-content-wrapper .ProseMirror pre .hljs-quote { color: #f5f3ee; }
.activity-editor-content-wrapper table th { background-color: #15151f; }
.activity-editor-doc-name { color: #f5f3ee; }
.activity-editor-doc-name svg { color: #f5f3ee; }
.activity-editor-top { background-color: #0b0b14; }
.aria-selected\:bg-white\/\[0\.06\][aria-selected=true] { background-color: #0b0b14; }
.bg-\[\#FFF5F0\] { background-color: #15151f; }
.bg-\[\#f8f8f8\] { background-color: #0b0b14; }
.bg-\[\#fbfdff\] { background-color: #0b0b14; }
.bg-\[\#fcfbfc\] { background-color: #0b0b14; }
.bg-amber-200\/20 { background-color: #15151f; }
.bg-amber-50\/30 { background-color: #0b0b14; }
.bg-amber-50\/40 { background-color: #0b0b14; }
.bg-amber-50\/50 { background-color: #0b0b14; }
.bg-amber-50\/60 { background-color: #0b0b14; }
.bg-amber-50\/70 { background-color: #0b0b14; }
.bg-blue-100\/50 { background-color: #15151f; }
.bg-blue-50\/20 { background-color: #15151f; }
.bg-blue-50\/50 { background-color: #15151f; }
.bg-blue-50\/70 { background-color: #15151f; }
.bg-cyan-50\/40 { background-color: #0b0b14; }
.bg-emerald-100\/70 { background-color: #15151f; }
.bg-emerald-200\/20 { background-color: #15151f; }
.bg-emerald-300\/20 { background-color: #15151f; }
.bg-emerald-50\/20 { background-color: #0b0b14; }
.bg-emerald-50\/30 { background-color: #0b0b14; }
.bg-emerald-50\/50 { background-color: #0b0b14; }
.bg-emerald-50\/60 { background-color: #0b0b14; }
.bg-emerald-50\/70 { background-color: #0b0b14; }
.bg-gray-100\/50 { background-color: #15151f; }
.bg-gray-100\/80 { background-color: #15151f; }
.bg-gray-200\/50 { background-color: #15151f; }
.bg-gray-200\/60 { background-color: #15151f; }
.bg-gray-200\/70 { background-color: #15151f; }
.bg-gray-200\/80 { background-color: #15151f; }
.bg-gray-300\/25 { background-color: #15151f; }
.bg-gray-50\/30 { background-color: #0b0b14; }
.bg-gray-50\/40 { background-color: #0b0b14; }
.bg-gray-50\/50 { background-color: #0b0b14; }
.bg-gray-50\/60 { background-color: #0b0b14; }
.bg-gray-50\/70 { background-color: #0b0b14; }
.bg-gray-50\/80 { background-color: #0b0b14; }
.bg-gray-50\/90 { background-color: #0b0b14; }
.bg-green-200\/60 { background-color: #15151f; }
.bg-green-200\/80 { background-color: #15151f; }
.bg-green-50\/70 { background-color: #0b0b14; }
.bg-indigo-50\/40 { background-color: #15151f; }
.bg-indigo-50\/50 { background-color: #15151f; }
.bg-neutral-100\/80 { background-color: #15151f; }
.bg-neutral-200\/60 { background-color: #15151f; }
.bg-neutral-200\/80 { background-color: #15151f; }
.bg-neutral-50\/50 { background-color: #0b0b14; }
.bg-neutral-50\/70 { background-color: #0b0b14; }
.bg-neutral-50\/95 { background-color: #0b0b14; }
.bg-purple-50\/70 { background-color: #15151f; }
.bg-red-50\/20 { background-color: #15151f; }
.bg-red-50\/30 { background-color: #15151f; }
.bg-red-50\/40 { background-color: #15151f; }
.bg-red-50\/50 { background-color: #15151f; }
.bg-red-50\/60 { background-color: #15151f; }
.bg-rose-100\/70 { background-color: #15151f; }
.bg-rose-200\/60 { background-color: #15151f; }
.bg-rose-50\/70 { background-color: #15151f; }
.bg-sky-50\/50 { background-color: #0b0b14; }
.bg-slate-100\/30 { background-color: #15151f; }
.bg-slate-100\/5 { background-color: #15151f; }
.bg-slate-100\/80 { background-color: #15151f; }
.bg-slate-200\/60 { background-color: #15151f; }
.bg-slate-50\/95 { background-color: #0b0b14; }
.bg-teal-50\/60 { background-color: #0b0b14; }
.bg-teal-50\/70 { background-color: #0b0b14; }
.bg-violet-100\/70 { background-color: #15151f; }
.bg-violet-50\/60 { background-color: #15151f; }
.bg-white\/10 { background-color: #0b0b14; }
.bg-white\/15 { background-color: #0b0b14; }
.bg-white\/5 { background-color: #0b0b14; }
.bg-white\/70 { background-color: #0b0b14; }
.bg-white\/85 { background-color: #0b0b14; }
.bg-white\/90 { background-color: #0b0b14; }
.bg-white\/95 { background-color: #0b0b14; }
.bg-white\/\[0\.02\] { background-color: #0b0b14; }
.bg-white\/\[0\.03\] { background-color: #0b0b14; }
.bg-white\/\[0\.04\] { background-color: #0b0b14; }
.bg-white\/\[0\.05\] { background-color: #0b0b14; }
.bg-white\/\[0\.06\] { background-color: #0b0b14; }
.bg-white\/\[0\.07\] { background-color: #0b0b14; }
.bg-white\/\[0\.08\] { background-color: #0b0b14; }
.bg-white\/\[0\.10\] { background-color: #0b0b14; }
.bg-white\/\[0\.12\] { background-color: #0b0b14; }
.bg-white\/\[0\.15\] { background-color: #0b0b14; }
.bg-yellow-200\/80 { background-color: #15151f; }
.bg-yellow-400\/10 { background-color: #15151f; }
.bg-yellow-50\/70 { background-color: #0b0b14; }
.bg-zinc-200\/80 { background-color: #15151f; }
.board-editor .board-card-content blockquote { color: #f5f3ee; }
.canva-content-wrapper .ProseMirror a { color: #f5f3ee; }
.canva-content-wrapper .ProseMirror a:hover { color: #f5f3ee; }
.canva-content-wrapper .ProseMirror pre .hljs-comment,.canva-content-wrapper .ProseMirror pre .hljs-quote { color: #f5f3ee; }
.canva-content-wrapper .ProseMirror table th { background-color: #15151f; }
.collaboration-cursor__label { color: #f5f3ee; }
.editor-drag-handle .action-btn { color: #f5f3ee; }
.editor-drag-handle .action-btn:hover { color: #f5f3ee; }
.editor-drag-handle .copy-btn:active { color: #f5f3ee; }
.editor-drag-handle .copy-btn:hover { color: #f5f3ee; }
.editor-drag-handle .delete-btn:active { color: #f5f3ee; }
.editor-drag-handle .delete-btn:hover { color: #f5f3ee; }
.editor-drag-handle .drag-grip:active,.editor-drag-handle.is-dragging .drag-grip { color: #f5f3ee; }
.editor-drag-handle .drag-grip:hover { color: #f5f3ee; }
.editor-drag-handle .tooltip-text { color: #f5f3ee; }
.editor-menu-item { color: #f5f3ee; }
.editor-menu-item .icon { color: #f5f3ee; }
.editor-menu-item.is-active { color: #f5f3ee; }
.editor-menu-item.is-active .icon { color: #f5f3ee; }
.editor-preview-wrapper .ProseMirror a { color: #f5f3ee; }
.editor-preview-wrapper .ProseMirror table th { background-color: #15151f; }
.editor-tool-btn { color: #f5f3ee; }
.editor-tool-btn-badge { color: #f5f3ee; }
.editor-tool-btn-code { color: #f5f3ee; }
.editor-tool-btn-code.is-active { color: #f5f3ee; }
.editor-tool-btn-divider { color: #f5f3ee; }
.editor-tool-btn-link.is-active { color: #f5f3ee; }
.editor-tool-btn-media { color: #f5f3ee; }
.editor-tool-btn-tip { color: #f5f3ee; }
.editor-tool-btn-user { color: #f5f3ee; }
.editor-tool-btn.is-active { color: #f5f3ee; }
.editor-tool-select { background-color: #0b0b14; }
.editor-tool-select { color: #f5f3ee; }
.editor-tool-select:hover { background-color: #0b0b14; }
.group-aria-selected\/item\:bg-white\/\[0\.08\]:is(:where(.group\/item)[aria-selected=true] *) { background-color: #0b0b14; }
.group-focus-within\:text-black\/70:is(:where(.group):focus-within *) { color: #f5f3ee; }
.group-hover\:bg-white\/10:is(:where(.group):hover *) { background-color: #0b0b14; }
.group-hover\:text-black\/50:is(:where(.group):hover *) { color: #f5f3ee; }
.group-hover\:text-black\/70:is(:where(.group):hover *) { color: #f5f3ee; }
.hover\:bg-\[\#FFF5F0\]:hover { background-color: #15151f; }
.hover\:bg-amber-100\/80:hover { background-color: #15151f; }
.hover\:bg-blue-50\/50:hover { background-color: #15151f; }
.hover\:bg-cyan-100\/80:hover { background-color: #15151f; }
.hover\:bg-emerald-300\/10:hover { background-color: #15151f; }
.hover\:bg-gray-100\/30:hover { background-color: #15151f; }
.hover\:bg-gray-100\/60:hover { background-color: #15151f; }
.hover\:bg-gray-100\/80:hover { background-color: #15151f; }
.hover\:bg-gray-200\/80:hover { background-color: #15151f; }
.hover\:bg-gray-300\/50:hover { background-color: #15151f; }
.hover\:bg-gray-50\/40:hover { background-color: #0b0b14; }
.hover\:bg-gray-50\/50:hover { background-color: #0b0b14; }
.hover\:bg-gray-50\/60:hover { background-color: #0b0b14; }
.hover\:bg-green-100\/70:hover { background-color: #15151f; }
.hover\:bg-neutral-100\/60:hover { background-color: #15151f; }
.hover\:bg-neutral-100\/70:hover { background-color: #15151f; }
.hover\:bg-neutral-100\/80:hover { background-color: #15151f; }
.hover\:bg-neutral-50\/50:hover { background-color: #0b0b14; }
.hover\:bg-purple-100\/70:hover { background-color: #15151f; }
.hover\:bg-red-50\/50:hover { background-color: #15151f; }
.hover\:bg-rose-100\/80:hover { background-color: #15151f; }
.hover\:bg-white\/10:hover { background-color: #0b0b14; }
.hover\:bg-white\/15:hover { background-color: #0b0b14; }
.hover\:bg-white\/25:hover { background-color: #0b0b14; }
.hover\:bg-white\/30:hover { background-color: #0b0b14; }
.hover\:bg-white\/50:hover { background-color: #0b0b14; }
.hover\:bg-white\/5:hover { background-color: #0b0b14; }
.hover\:bg-white\/70:hover { background-color: #0b0b14; }
.hover\:bg-white\/90:hover { background-color: #0b0b14; }
.hover\:bg-white\/\[0\.02\]:hover { background-color: #0b0b14; }
.hover\:bg-white\/\[0\.03\]:hover { background-color: #0b0b14; }
.hover\:bg-white\/\[0\.04\]:hover { background-color: #0b0b14; }
.hover\:bg-white\/\[0\.05\]:hover { background-color: #0b0b14; }
.hover\:bg-white\/\[0\.06\]:hover { background-color: #0b0b14; }
.hover\:bg-white\/\[0\.07\]:hover { background-color: #0b0b14; }
.hover\:bg-white\/\[0\.08\]:hover { background-color: #0b0b14; }
.hover\:bg-white\/\[0\.14\]:hover { background-color: #0b0b14; }
.hover\:bg-white\/\[0\.1\]:hover { background-color: #0b0b14; }
.hover\:bg-yellow-100\/70:hover { background-color: #15151f; }
.hover\:text-black\/50:hover { color: #f5f3ee; }
.hover\:text-black\/70:hover { color: #f5f3ee; }
.hover\:text-black\/75:hover { color: #f5f3ee; }
.placeholder\:text-black\/25::placeholder { color: #f5f3ee; }
.slash-commands-category-label { color: #f5f3ee; }
.slash-commands-empty { color: #f5f3ee; }
.slash-commands-item-description { color: #f5f3ee; }
.slash-commands-item-icon { color: #f5f3ee; }
.slash-commands-item-title { color: #f5f3ee; }
.text-\[\#0f0f10\] { color: #f5f3ee; }
.text-\[\#111113\] { color: #f5f3ee; }
.text-\[\#232323\] { color: #f5f3ee; }
.text-\[\#635BFF\] { color: #f5f3ee; }
.text-amber-700\/80 { color: #f5f3ee; }
.text-amber-800\/80 { color: #f5f3ee; }
.text-black\/10 { color: #f5f3ee; }
.text-black\/25 { color: #f5f3ee; }
.text-black\/30 { color: #f5f3ee; }
.text-black\/35 { color: #f5f3ee; }
.text-black\/45 { color: #f5f3ee; }
.text-black\/50 { color: #f5f3ee; }
.text-black\/55 { color: #f5f3ee; }
.text-black\/70 { color: #f5f3ee; }
.text-blue-600\/70 { color: #f5f3ee; }
.text-emerald-800\/80 { color: #f5f3ee; }
.text-rose-600\/90 { color: #f5f3ee; }
.text-teal-700\/90 { color: #f5f3ee; }
.tippy-arrow { color: #f5f3ee; }
.toc-item .toc-check { color: #f5f3ee; }
.toc-item .toc-link { color: #f5f3ee; }
body { color: #f5f3ee; }

/* 4. Where the inversion is wrong because one variable serves two roles.
 *    text-white sits on coloured buttons and would have gone dark-on-dark;
 *    invisible text is the single worst failure mode of a theme like this. */
.text-white { color: #f5f3ee; }
.text-black { color: #f5f3ee; }
.hover\:text-white:hover { color: #f5f3ee; }
.hover\:text-black:hover { color: #f5f3ee; }
.group:hover .group-hover\:text-white { color: #f5f3ee; }
.fill-white { fill: #f5f3ee; }
.placeholder-white::placeholder { color: #6a685f; }
.placeholder-black::placeholder { color: #6a685f; }
.selection\:text-white ::selection { color: #f5f3ee; }

/* Placeholders inherit the inverted ramp and land too bright to read as
 * placeholder text. Pin them to the subtle tier. */
input::placeholder, textarea::placeholder {
  color: #6a685f;
}

/* 5. Page chrome the utilities do not reach. */
html, body {
  background-color: #0b0b14;
  color: #f5f3ee;
}

/* Shadows built for a white page read as grey smudges on near-black.
 * Deepen them so elevation still reads. */
:root {
  --tw-shadow-color: rgba(0, 0, 0, 0.55);
}

/* Scrollbars are part of the surface on a dark app. */
* { scrollbar-color: #3a3a4a #0b0b14; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #0b0b14; }
*::-webkit-scrollbar-thumb {
  background: #3a3a4a;
  border-radius: 6px;
}

/* Inputs. Upstream draws them as a white field with a pale hairline border;
 * inverted, both the fill and the border collapsed into the canvas and the
 * fields became invisible rectangles. Give them a real edge back. */
input:not([type=checkbox]):not([type=radio]), textarea, select {
  background-color: #15151f;
  border-color: #2a2a38;
  color: #f5f3ee;
}
input:not([type=checkbox]):not([type=radio]):focus, textarea:focus, select:focus {
  border-color: #c9a43c;
}

/* Native form controls and the browser's own UI (date pickers, spinners)
 * render light unless the page declares its scheme. */
:root { color-scheme: dark; }

/* 5a. LearnHouse colours its AI affordances purple, which on a gold and
 *     near-black brand reads as somebody else's product bolted on. The
 *     violet family is remapped onto DreamCatcher's own iris-violet so it
 *     harmonises instead of clashing.
 *
 *     Semantic families are deliberately NOT touched. red, amber, orange,
 *     yellow, green and emerald carry meaning (error, warning, success);
 *     retinting them to fit the palette would make the app prettier and
 *     less truthful. Prefer a slightly off-brand error state to a
 *     beautiful one nobody reads as an error. */
:root {
  --color-purple-300: #7e6cb6;
  --color-purple-400: #7e6cb6;
  --color-purple-500: #7e6cb6;
  --color-purple-600: #6c5ba3;
  --color-purple-700: #584a86;
  --color-purple-800: #443968;
  --color-purple-900: #332c4f;
  --color-purple-950: #221d34;
  --color-violet-300: #7e6cb6;
  --color-violet-400: #7e6cb6;
  --color-violet-500: #7e6cb6;
  --color-violet-600: #6c5ba3;
  --color-violet-700: #584a86;
  --color-violet-800: #443968;
  --color-violet-900: #332c4f;
  --color-violet-950: #221d34;
  --color-indigo-300: #7e6cb6;
  --color-indigo-400: #7e6cb6;
  --color-indigo-500: #7e6cb6;
  --color-indigo-600: #6c5ba3;
  --color-indigo-700: #584a86;
  --color-indigo-800: #443968;
  --color-indigo-900: #332c4f;
  --color-indigo-950: #221d34;
  --color-fuchsia-300: #7e6cb6;
  --color-fuchsia-400: #7e6cb6;
  --color-fuchsia-500: #7e6cb6;
  --color-fuchsia-600: #6c5ba3;
  --color-fuchsia-700: #584a86;
  --color-fuchsia-800: #443968;
  --color-fuchsia-900: #332c4f;
  --color-fuchsia-950: #221d34;
}

/* 5b. Gold. Without this the inverted ramp produces a coherent but entirely
 *     monochrome app: every CTA reads as another dark rectangle. DESIGN.md
 *     treats gold as the single accent, so it goes on the things a learner
 *     is meant to click and nowhere else. The iridescent set stays reserved
 *     for the hero and the brand glyph. */

/* Primary actions. LearnHouse compiles these from bg-gray-900/bg-black,
 * which section 3b pinned to a dark surface; the ones that are genuinely
 * primary get the gold treatment here instead. */
button[type=submit], .btn-primary, [data-variant='default'] {
  background-color: #c9a43c;
  color: #0b0b14;
  font-weight: 600;
}
button[type=submit]:hover, .btn-primary:hover, [data-variant='default']:hover {
  background-color: #e3b43f;
}

/* Links and focus rings. Focus especially: a keyboard user needs to see
 * where they are, and the inverted ramp left the default ring nearly
 * invisible against the canvas. */
a:not([class*='bg-']):hover {
  color: #ebc968;
}
:focus-visible {
  outline: 2px solid #c9a43c;
  outline-offset: 2px;
}

/* Selection, carets and progress use the accent so the brand shows up in
 * the small interactions too. */
::selection {
  background: #6e531f;
  color: #f5f3ee;
}
* { caret-color: #c9a43c; }
progress::-webkit-progress-value, .bg-primary {
  background-color: #c9a43c;
}

/* 6. Typography. Cormorant Garamond for display, Inter for body, per
 *    DESIGN.md. The org font setting only reaches some surfaces, so the
 *    headings are bound here to cover the rest. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');
h1, h2, h3, .font-display {
  font-family: 'Cormorant Garamond', ui-serif, Georgia, serif;
  letter-spacing: -0.01em;
}
body {
  font-family: 'Inter', system-ui, sans-serif;
}