/*
 * Docs chrome overrides — load AFTER rl-ui.css (and after Next layout.css via link order).
 * rl-ui uses hsl(var(--*)) with HSL-channel tokens; docs use oklch/hex. Use var() directly.
 *
 * Re-assert docs semantic tokens so unlayered rl-ui :root (system-colors + UI globals)
 * does not paint the docs shell with product gray / HSL channel values.
 * Product tokens (--button-*, --coolest-gray-*, etc.) stay from rl-ui for rl-* controls.
 */

:root,
html.light {
  --background: oklch(1 0 0);
  --foreground: oklch(0% 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0% 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0% 0 0);
  --primary: oklch(0% 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.97 0.01 17);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0% 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --surface: oklch(0.98 0 0);
  --surface-foreground: var(--foreground);
  --code: var(--surface);
  --code-foreground: var(--surface-foreground);
  --code-highlight: oklch(0.96 0 0);
  --code-number: oklch(0.56 0 0);
  --selection: oklch(0% 0 0);
  --selection-foreground: oklch(1 0 0);
  color-scheme: light;
}

html.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.371 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.58 0.22 27);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.439 0 0);
  --surface: oklch(0.2 0 0);
  --surface-foreground: oklch(0.708 0 0);
  --code: var(--surface);
  --code-foreground: var(--surface-foreground);
  --code-highlight: oklch(0.25 0 0);
  --code-number: oklch(0.72 0 0);
  --selection: oklch(0.985 0 0);
  --selection-foreground: oklch(0.145 0 0);
  color-scheme: dark;
}

.bg-background {
  background-color: var(--background) !important;
}

.text-foreground {
  color: var(--foreground) !important;
}

.text-muted-foreground {
  color: var(--muted-foreground) !important;
}

/*
 * Do not set -webkit-text-fill-color on .text-foreground — it inherits into
 * rl-* controls and paints primary button labels black on black. Let fill
 * follow each control's own `color` (e.g. text-text-on-color → white).
 */
.rl-btn,
[class*="text-text-on-color"] {
  -webkit-text-fill-color: currentColor;
}

.border-border {
  border-color: var(--border) !important;
}

.border-border\/50 {
  border-color: color-mix(in oklab, var(--border) 50%, transparent) !important;
}

.border-input {
  border-color: var(--input) !important;
}

/*
 * Unlayered rl-ui `.hidden` / `.w-full` beat Tailwind v4 layered `lg:flex` /
 * `md:w-40`. Restore docs chrome breakpoints (also mirrored in preview-runtime).
 */
@media (min-width: 640px) {
  .sm\:flex {
    display: flex !important;
  }
  .sm\:block {
    display: block !important;
  }
  .sm\:hidden {
    display: none !important;
  }
  .sm\:pr-12 {
    padding-right: calc(var(--spacing) * 12) !important;
  }
}

@media (min-width: 768px) {
  .md\:flex {
    display: flex !important;
  }
  .md\:block {
    display: block !important;
  }
  .md\:hidden {
    display: none !important;
  }
  .md\:w-auto {
    width: auto !important;
  }
  .md\:w-40 {
    width: calc(var(--spacing) * 40) !important;
  }
  .md\:flex-1 {
    flex: 1 1 0% !important;
  }
  .md\:flex-none {
    flex: none !important;
  }
  .md\:justify-end {
    justify-content: flex-end !important;
  }
}

@media (min-width: 1024px) {
  .lg\:flex {
    display: flex !important;
  }
  .lg\:block {
    display: block !important;
  }
  .lg\:grid {
    display: grid !important;
  }
  .lg\:hidden {
    display: none !important;
  }
  .lg\:inline-flex {
    display: inline-flex !important;
  }
  .lg\:w-56 {
    width: calc(var(--spacing) * 56) !important;
  }
}

@media (min-width: 1280px) {
  .xl\:flex {
    display: flex !important;
  }
  .xl\:block {
    display: block !important;
  }
  .xl\:hidden {
    display: none !important;
  }
  .xl\:w-full {
    width: 100% !important;
  }
}

/* Framework tabs (React / Vanilla JS) */
[data-framework-tabs] [data-slot="tabs-trigger"] {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted-foreground) !important;
  -webkit-text-fill-color: var(--muted-foreground) !important;
}

[data-framework-tabs] [data-slot="tabs-trigger"]:hover {
  color: var(--foreground) !important;
  -webkit-text-fill-color: var(--foreground) !important;
}

[data-framework-tabs] [data-slot="tabs-trigger"][data-state="active"] {
  background: transparent !important;
  box-shadow: inset 0 -2px 0 0 var(--foreground) !important;
  color: var(--foreground) !important;
  -webkit-text-fill-color: var(--foreground) !important;
}

[data-framework-tabs] [data-slot="tabs-trigger"]::after {
  display: none !important;
}

/* Framework + preview code blocks */
[data-framework-tabs] .border.bg-code,
[data-slot="component-preview"].border {
  border-color: var(--border) !important;
}

[data-slot="component-preview"] .border-t {
  border-top-color: var(--border) !important;
}

[data-framework-tabs] [data-framework-code-header] {
  border-bottom: 1px solid color-mix(in oklab, var(--border) 50%, transparent) !important;
}

[data-framework-tabs] [data-rehype-pretty-code-figure] {
  margin-top: 0 !important;
  border-width: 0 !important;
}

/* Typeset tables: rl-ui * { border-color: hsl(var(--border)) } → black row rules */
.typeset table {
  border-block-end-color: var(--typeset-rule) !important;
}

.typeset :is(tbody, tfoot) :is(td, th) {
  border-block-start-color: var(--typeset-rule) !important;
}

/*
 * rl-ui maps Tailwind's *-12 scale to its own --spacing-12 (10rem). Restore
 * Tailwind v4 spacing so docs chrome (ComponentPreview mb-12, etc.) isn't huge.
 */
.m-12 {
  margin: calc(var(--spacing) * 12) !important;
}
.mx-12 {
  margin-inline: calc(var(--spacing) * 12) !important;
}
.my-12 {
  margin-block: calc(var(--spacing) * 12) !important;
}
.mt-12 {
  margin-top: calc(var(--spacing) * 12) !important;
}
.mb-12 {
  margin-bottom: calc(var(--spacing) * 12) !important;
}
.ml-12 {
  margin-left: calc(var(--spacing) * 12) !important;
}
.mr-12 {
  margin-right: calc(var(--spacing) * 12) !important;
}
.gap-12 {
  gap: calc(var(--spacing) * 12) !important;
}
.p-12 {
  padding: calc(var(--spacing) * 12) !important;
}
.px-12 {
  padding-inline: calc(var(--spacing) * 12) !important;
}
.py-12 {
  padding-block: calc(var(--spacing) * 12) !important;
}
.pt-12 {
  padding-top: calc(var(--spacing) * 12) !important;
}
.pb-12 {
  padding-bottom: calc(var(--spacing) * 12) !important;
}
.pl-12 {
  padding-left: calc(var(--spacing) * 12) !important;
}
.pr-12 {
  padding-right: calc(var(--spacing) * 12) !important;
}

/* Dialog centering: TW v4 translate + rl-ui transform double-offset */
[data-slot="dialog-content"],
[data-slot="alert-dialog-content"] {
  translate: none !important;
  transform: translate(-50%, -50%) !important;
}