/* ============================================================================
   🌼 theme-daisy.css — DaisyUI prototype theme (#248)

   A decision-gate prototype proving a DaisyUI-backed presentation layer that
   stays 100% on-prem: the compiled daisyUI 5.7.22 build is vendored under
   css/vendor/ (no CDN at runtime, no Node build tooling), and this stylesheet
   layers Rotkeeper's typography, content primitives, and a11y floor over the
   component CSS using daisyUI's own theme tokens.

   The page renders with data-theme="dracula"; every component and surface
   below keys off daisyUI's oklch tokens (--color-base-*, --color-primary,
   --color-warning, ...), so re-skinning is a single data-theme swap.

   Semantic audit tokens: the `rotkeeper.sh a11y` gate reads hex values from
   `:root`, so the dracula palette is mirrored here as sRGB hex (converted
   from the oklch definitions shipped in vendor/daisyui-5.7.22-themes.css).
   Keep these in sync if the theme or the vendor pin moves.
   ============================================================================ */

@import url("vendor/daisyui-5.7.22.css");
@import url("vendor/daisyui-5.7.22-themes.css");

/* ============================================================================
   1. SEMANTIC TOKENS (a11y audit mirror of the dracula palette)
   ============================================================================ */

:root {
  /* dracula sRGB hex, converted 1:1 from daisyUI's oklch definitions */
  --bg-color:        #050609; /* base-100 */
  --surface-color:   #040507; /* base-200 */
  --text-primary:    #efefe4; /* base-content */
  --text-secondary:  #91928c; /* base-content @ ~60% on base-100 */
  --accent-color:    #ff3190; /* primary */
  --code-bg:         #030406; /* base-300 */
  --code-text:       #efefe4; /* base-content */

  /* Prototype-only layout constants (not part of the audit contract) */
  --daisy-measure:   66ch;
  --daisy-radius:    var(--radius-box);
}

/* Palette-driven themes: `palette:` frontmatter becomes data-theme (template
   `$if(palette)$ data-theme="$palette$"$endif$`), and the vendored
   daisyui-5.7.22-themes.css provides every [data-theme=…] palette. When a page
   has no palette, no attribute is emitted — without a guard that would fall
   back to the vendored build's bare `:root` (light) palette, so redeclare the
   dracula defaults here for the absent/empty case. Registered theme names are
   the 35 in vendor/daisyui-5.7.22-themes.css (synthwave, night, dim, black,
   business, …); an unknown name falls back to the vendored base palette. */
html:not([data-theme]),
html[data-theme=""] {
  color-scheme: dark;
  --color-base-100: #050609;
  --color-base-200: #040507;
  --color-base-300: #030406;
  --color-base-content: #efefe4;
  --color-primary: #ff3190;
  --color-primary-content: #020001;
  --color-warning: #e0f443;
  --color-warning-content: #020201;
  --color-error: #ff1717;
  --color-error-content: #020000;
  --radius-selector: 0.5rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --border: 1px;
  --depth: 1;
}

/* ============================================================================
   2. BASE
   ============================================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

body.daisy-body {
  margin: 0;
  background: var(--color-base-100);
  color: var(--color-base-content);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 16px;
  line-height: 1.75;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ============================================================================
   3. LAYOUT SHELL
   ============================================================================ */

.daisy-shell {
  max-width: var(--daisy-measure);
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

.daisy-header {
  margin-bottom: 2rem;
}

/* ============================================================================
   4. NAVBAR (daisyUI component) + CONFIG-DRIVEN NAV SLOT
   ============================================================================ */

.daisy-navbar {
  border: 1px solid var(--color-base-300);
  border-radius: var(--daisy-radius);
  background: var(--color-base-200);
}

.daisy-brand {
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* The adapter fills <site-nav> with <nav><ul><li><a>. DaisyUI's horizontal
   menu look is applied here against the generated structure (the shared
   config-driven slot cannot carry component classes itself). */
.daisy-nav {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.daisy-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  margin: 0;
  list-style: none;
}

.daisy-nav li {
  margin: 0;
  list-style: none;
}

.daisy-nav a {
  display: inline-block;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-field);
  color: var(--color-base-content);
  text-decoration: none;
  font-size: 0.88rem;
  white-space: nowrap;
}

.daisy-nav a:hover {
  background: var(--color-base-300);
  color: var(--color-base-content);
}

.daisy-nav a:focus-visible {
  outline: 2px solid var(--color-base-content);
  outline-offset: 2px;
}

/* ============================================================================
   5. TITLE BLOCK + METADATA BADGES
   ============================================================================ */

.daisy-title {
  margin: 1.5rem 0 0.25rem;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-base-content);
}

.daisy-deck {
  margin: 0;
  color: var(--text-secondary);
  font-size: 1.05rem;
}

.daisy-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

/* ============================================================================
   6. ARTICLE SURFACE (daisyUI card component)
   ============================================================================ */

.daisy-article {
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.3);
}

.daisy-article .card-body {
  font-size: 1rem;
  gap: 0;
}

/* ============================================================================
   7. BODY-CONTENT TYPOGRAPHY (rendered $body$)
   ============================================================================
   daisyUI's preflight resets headings to inherit and strips list markers;
   this section restores the document hierarchy with daisyUI tokens. */

.daisy-article h1,
.daisy-article h2,
.daisy-article h3,
.daisy-article h4,
.daisy-article h5,
.daisy-article h6 {
  margin: 1.6em 0 0.6em;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-base-content);
}

.daisy-article h1 { font-size: 1.9rem; }
.daisy-article h2 {
  font-size: 1.55rem;
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--color-base-300);
}
.daisy-article h3 { font-size: 1.28rem; color: var(--color-primary); }
.daisy-article h4 { font-size: 1.1rem; }
.daisy-article h5 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.daisy-article h6 { font-size: 0.88rem; color: var(--text-secondary); }

.daisy-article p {
  margin: 0 0 1.15em;
}

.daisy-article a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.daisy-article a:hover {
  color: color-mix(in oklab, var(--color-primary) 80%, var(--color-base-content));
}

.daisy-article ul,
.daisy-article ol {
  margin: 0 0 1.15em;
  padding-inline-start: 1.6em;
}

.daisy-article ul { list-style: disc; }
.daisy-article ol { list-style: decimal; }
.daisy-article ul ul { list-style: circle; }
.daisy-article ol ol { list-style: lower-alpha; }
.daisy-article ul ul ul { list-style: square; }

.daisy-article li {
  margin: 0.25em 0;
}

.daisy-article li > p {
  margin: 0.25em 0;
}

.daisy-article strong,
.daisy-article b {
  font-weight: 700;
  color: var(--color-base-content);
}

.daisy-article em,
.daisy-article i {
  font-style: italic;
}

.daisy-article mark {
  background: var(--color-warning);
  color: var(--color-warning-content);
  padding: 0 0.25em;
  border-radius: var(--radius-field);
}

.daisy-article kbd {
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  border-bottom-width: 2px;
  border-radius: var(--radius-field);
  padding: 0.1em 0.45em;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
}

/* Blockquotes double as the warning/note primitive in rendered content
   (docs use `> **Note:** …`). Styled as a daisyUI-style alert using the
   warning token so the mapping holds without touching content markup. */
.daisy-article blockquote {
  margin: 1.4em 0;
  padding: 0.9rem 1.1rem;
  border-inline-start: 4px solid var(--color-warning);
  background: color-mix(in oklab, var(--color-warning) 10%, var(--color-base-200));
  border-radius: var(--radius-field);
  color: var(--color-base-content);
}

.daisy-article blockquote p:last-child {
  margin-bottom: 0;
}

/* Code panels */
.daisy-article code {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.daisy-article :not(pre) > code {
  background: var(--color-base-300);
  color: var(--color-base-content);
  padding: 0.12em 0.35em;
  border-radius: var(--radius-field);
  overflow-wrap: anywhere;
}

.daisy-article pre {
  margin: 1.4em 0;
  padding: 1rem 1.2rem;
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--color-base-300);
  border-radius: var(--daisy-radius);
  overflow-x: auto;
  font-size: 0.88em;
  line-height: 1.65;
}

.daisy-article pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: 1em;
}

/* Tables */
.daisy-article table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 0.92em;
}

.daisy-article th,
.daisy-article td {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--color-base-300);
  text-align: left;
  vertical-align: top;
}

.daisy-article thead th {
  background: var(--color-base-300);
  color: var(--color-base-content);
  font-weight: 600;
}

.daisy-article tbody tr:nth-child(even) {
  background: color-mix(in oklab, var(--color-base-content) 4%, transparent);
}

.daisy-article hr {
  border: 0;
  border-top: 1px solid var(--color-base-300);
  margin: 2.2em 0;
}

.daisy-article img,
.daisy-article video {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-field);
  border: 1px solid var(--color-base-300);
}

.daisy-article figure {
  margin: 1.4em 0;
}

.daisy-article figcaption {
  margin-top: 0.5em;
  font-size: 0.85em;
  color: var(--text-secondary);
  text-align: center;
}

.daisy-article dl {
  margin: 0 0 1.15em;
}

.daisy-article dt {
  font-weight: 700;
  margin-top: 1em;
}

.daisy-article dd {
  margin: 0.25em 0 0.25em 1.6em;
}

/* Pandoc / renderer hooks */
.daisy-article .footnotes {
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid var(--color-base-300);
  font-size: 0.9em;
  color: var(--text-secondary);
}

.daisy-article .task-list {
  list-style: none;
  padding-inline-start: 0;
}

.daisy-article .task-list input[type="checkbox"] {
  accent-color: var(--color-primary);
  margin-right: 0.5em;
}

/* ============================================================================
   8. FOOTER (shared skeleton slot)
   ============================================================================ */

.daisy-footer {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-base-300);
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.daisy-footer .footer-credit {
  margin: 0;
}

.daisy-footer .footer-credit strong {
  color: var(--color-base-content);
}

.footer-asset-meta,
.footer-tags {
  margin: 0.3rem 0 0;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
}

/* ============================================================================
   9. FOCUS & ACCESSIBILITY FLOOR
   ============================================================================ */

:focus {
  outline: 2px solid var(--color-base-content);
  outline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   10. NARROW VIEWPORTS
   ============================================================================ */

@media (max-width: 700px) {
  .daisy-shell {
    padding: 0.75rem 0.75rem 2rem;
  }

  .daisy-title {
    font-size: 1.7rem;
  }

  .daisy-navbar {
    flex-wrap: wrap;
  }

  .daisy-nav {
    flex: 1 1 100%;
    order: 3;
    overflow-x: visible;
  }

  .daisy-nav ul {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .daisy-article .card-body {
    padding: 1.1rem;
  }
}

/* ============================================================================
   11. PRINT
   ============================================================================ */

@media print {
  body.daisy-body {
    background: #fff;
    color: #000;
  }

  .daisy-navbar,
  .daisy-meta-row {
    display: none;
  }

  .daisy-article {
    background: #fff;
    border: none;
    box-shadow: none;
  }

  .daisy-article a {
    color: #000;
  }

  .daisy-article h3 {
    color: #000;
  }

  .daisy-article pre {
    background: #f5f5f5;
    color: #000;
    border-color: #ccc;
  }
}