/**
 * Documentation Stylesheet
 * Unified styling with API documentation
 *
 * Design System:
 * - Font: Inter (variable font)
 * - Primary Colors: Slate (neutral) - simplified palette
 * - Accent: #c7ff6d (unified with API docs)
 * - Background: #0f0f0f (unified with API docs)
 * - Dark theme optimized, light theme support via prefers-color-scheme
 */

/* ============================================
   CSS VARIABLES & THEME
   ============================================ */

:root {
  /* Brand Colors */
  --brand-dark-blue: #000C12;   /* Dark Blue - R 0, G 12, B 18 */
  --brand-white: #FCFCFC;       /* White - R 252, G 252, B 252 */
  --brand-light-blue: #BBCFEA;  /* Light Blue - R 187, G 207, B 234 */
  --brand-light-purple: #DDD3F6; /* Light Purple - R 221, G 211, B 246 */
  --brand-grey: #8E8E8E;        /* Grey - R 142, G 142, B 142 */

  /* Color Palette - Slate (Primary Neutral) - Simplified */
  --color-slate-1: var(--brand-dark-blue);    /* Background - brand Dark Blue */
  --color-slate-2: #18191b;    /* Surface */
  --color-slate-3: #212225;    /* Elevated surface */
  --color-slate-6: #363a3f;    /* Borders */
  --color-slate-9: var(--brand-grey);    /* Muted text, links */
  --color-slate-11: #b0b4ba;   /* Secondary text */
  --color-slate-12: var(--brand-white);   /* Primary text - brand White */

  /* XBOW Accent - Neon green for home page/marketing only */
  --color-accent-primary: #c7ff6d;  /* Primary brand color - matches API */
  --color-accent-dark: #a1da08;     /* Darker variant for light mode */

  /* Highlight Colors */
  --color-highlight: var(--brand-light-purple);  /* Light Purple for dark mode */

  /* Semantic Colors */
  --color-background: var(--color-slate-1);
  --color-surface: var(--color-slate-2);
  --color-border: var(--color-slate-6);
  --color-text-primary: var(--color-slate-12);
  --color-text-secondary: var(--color-slate-11);
  --color-text-muted: var(--color-slate-9);
  --color-accent: var(--color-highlight);  /* Use highlight color for consistency */
  --color-link: var(--color-slate-9);
  --color-link-hover: var(--color-slate-11);
  --color-code-bg: #000000;
  --color-inline-code-bg: var(--color-slate-3);
  --color-inline-code-text: var(--color-slate-12);

  /* Typography */
  --font-family: "Geist Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
                 "Droid Sans", "Helvetica Neue", sans-serif;
  --font-family-mono: "Geist Mono Variable", "Courier New", monospace;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;

  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
}

/* ============================================
   FONT LOADING
   ============================================ */

/* Geist Variable - Main Font */
/* geist-cyrillic-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* geist-latin-ext-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* geist-latin-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Geist Mono Variable - Monospace Font */
/* geist-mono-cyrillic-wght-normal */
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist-mono-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* geist-mono-latin-ext-wght-normal */
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* geist-mono-latin-wght-normal */
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist-mono-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================
   BASE STYLES
   ============================================ */

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.625;
  color: var(--color-text-primary);
  background-color: var(--color-background);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Sticky footer layout */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================
   TYPOGRAPHY - HEADINGS
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-primary);
}

h1 {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-3xl);
  font-weight: 700;
  margin-bottom: var(--spacing-6);
  margin-top: var(--spacing-8);
}

h1:first-child {
  margin-top: 0;
}

h2 {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  margin-bottom: var(--spacing-4);
  margin-top: var(--spacing-6);
}

h3 {
  font-size: var(--font-size-xl);
  font-weight: 500;
  margin-bottom: var(--spacing-3);
  margin-top: var(--spacing-5);
}

h4 {
  font-size: var(--font-size-lg);
  font-weight: 500;
  margin-bottom: var(--spacing-3);
  margin-top: var(--spacing-4);
}

/* ============================================
   TYPOGRAPHY - BODY TEXT
   ============================================ */

p {
  margin: 0 0 var(--spacing-4) 0;
  line-height: 1.625;
  word-break: break-word;
}

a {
  color: var(--color-link);
  text-decoration: underline;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-link-hover);
}

strong, b {
  font-weight: 600;
}

em, i {
  font-style: italic;
}

/* ============================================
   LISTS
   ============================================ */

ul, ol {
  margin: 0 0 var(--spacing-4) 0;
  padding-left: var(--spacing-5);
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

li {
  margin-bottom: var(--spacing-2);
  line-height: 1.625;
}

li:last-child {
  margin-bottom: 0;
}

ul ul, ol ol, ul ol, ol ul {
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}

/* Nested list styling */
ul ul {
  list-style-type: circle;
}

ul ul ul {
  list-style-type: square;
}

/* ============================================
   TABLE OF CONTENTS
   ============================================ */

#TOC {
  float: right;
  max-width: 280px;
  margin: 0 0 var(--spacing-6) var(--spacing-6);
  padding: var(--spacing-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
}

#TOC::before {
  content: "On this page";
  display: block;
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-3);
  padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--color-border);
}

#TOC ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#TOC li {
  margin-bottom: 0;
}

#TOC li:last-child {
  margin-bottom: 0;
}

#TOC > ul > li {
  margin-bottom: 0;
}

#TOC > ul > li:last-child {
  margin-bottom: 0;
}

#TOC ul ul {
  margin-top: 0;
  padding-left: var(--spacing-3);
}

#TOC a {
  color: var(--color-link);
  text-decoration: none;
  display: block;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

#TOC a:hover {
  background-color: var(--color-border);
  color: var(--color-link-hover);
}

/* Active/current section indicator */
#TOC a:target,
#TOC a:focus {
  background-color: var(--color-border);
  color: var(--color-text-primary);
  font-weight: 600;
  border-left: 3px solid var(--color-highlight);
  padding-left: calc(var(--spacing-3) - 3px);
}

/* ============================================
   BREADCRUMB NAVIGATION
   ============================================ */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-6);
  padding-bottom: var(--spacing-3);
  border-bottom: 1px solid var(--color-border);
}

.breadcrumb a {
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.breadcrumb a:hover {
  color: var(--color-link-hover);
  background-color: rgba(255, 255, 255, 0.08);
}

.breadcrumb-separator {
  color: var(--color-text-muted);
  user-select: none;
}

.breadcrumb-current {
  color: var(--color-text-primary);
  font-weight: 500;
}

.breadcrumb-api-link {
  margin-left: auto;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.breadcrumb-api-link:hover {
  color: var(--color-link-hover);
  background-color: rgba(255, 255, 255, 0.08);
}

/* ============================================
   CODE
   ============================================ */

/* Inline code */
code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  background-color: var(--color-inline-code-bg);
  color: var(--color-inline-code-text);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Code blocks */
pre {
  font-family: var(--font-family-mono);
  background-color: var(--color-code-bg);
  color: var(--color-slate-11);
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin: 0 0 var(--spacing-4) 0;
  line-height: 1.5;
  transition: color 0.2s ease;
}

pre:hover {
  color: var(--color-slate-12);
}

pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  white-space: pre;
  font-size: var(--font-size-md);
}

/* ============================================
   TABLES
   ============================================ */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--spacing-4) 0;
  font-size: var(--font-size-md);
}

th, td {
  padding: var(--spacing-2);
  border: 1px solid var(--color-border);
  text-align: left;
}

th {
  background-color: var(--color-slate-3);
  font-weight: 600;
  color: var(--color-text-primary);
}

tr:nth-child(even) {
  background-color: var(--color-slate-2);
}

tr:hover {
  background-color: var(--color-slate-3);
}

/* ============================================
   BLOCKQUOTES
   ============================================ */

blockquote {
  margin: 0 0 var(--spacing-4) 0;
  padding-left: var(--spacing-4);
  border-left: 3px solid var(--color-highlight);
  color: var(--color-text-secondary);
  font-style: italic;
}

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

/* ============================================
   HORIZONTAL RULES
   ============================================ */

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-6) 0;
}

/* ============================================
   IMAGES
   ============================================ */

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--spacing-4) 0;
  border-radius: var(--radius-md);
}

/* Inline UI icons (e.g. button icons referenced in step instructions) */
.ui-icon {
  display: inline-block;
  vertical-align: top;
  margin: 2px;
  filter: invert(1);
}

/* ============================================
   CONTAINER & LAYOUT
   ============================================ */

.container {
  max-width: 800px;
  margin: 0;
  margin-left: min(75px, 5vw);
  padding: var(--spacing-6);
  flex: 1; /* Expand to push footer to bottom */
}

/* ============================================
   SIDEBAR NAVIGATION
   ============================================ */

/* Fixed left sidebar */
.doc-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 100vh;
  background-color: var(--color-surface);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  z-index: 100;
}

.sidebar-content {
  padding: var(--spacing-6) var(--spacing-4);
}

/* Sidebar header */
.sidebar-header {
  margin-bottom: var(--spacing-6);
}

.sidebar-title {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
  display: block;
  transition: color 0.2s ease;
}

.sidebar-title:hover {
  color: var(--color-link-hover);
}

/* Navigation structure */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.nav-section {
  display: block;
  margin-bottom: var(--spacing-4);
}

.nav-section-title {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* padding: var(--spacing-2) 0; */
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0;
}

/* Remove default disclosure triangle */
.nav-section-title::-webkit-details-marker {
  display: none;
}

.nav-section-title::marker {
  display: none;
}

/* Add custom disclosure triangle */
.nav-section-title::before {
  content: '›';
  display: inline-block;
  font-size: var(--font-size-lg);
  font-weight: 400;
  transition: transform 0.2s ease;
  width: 16px;
  text-align: center;
}

/* Rotate triangle when open */
.nav-section[open] > .nav-section-title::before {
  transform: rotate(90deg);
}

.nav-section-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--spacing-1);
}

/* Navigation links */
.nav-section a {
  display: block;
  padding: var(--spacing-2) var(--spacing-3);
  color: var(--color-link);
  text-decoration: none;
  font-size: var(--font-size-md);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.nav-section a:hover {
  background-color: var(--color-border);
  color: var(--color-link-hover);
}

/* Active page highlight */
.nav-section a.active {
  background-color: var(--color-border);
  color: var(--color-text-primary);
  font-weight: 600;
  border-left: 3px solid var(--color-highlight);
  padding-left: calc(var(--spacing-3) - 3px);
}

/* Nested folder styles */
.nav-subfolder {
  display: block;
  margin-bottom: var(--spacing-2);
}

.nav-folder-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-secondary);
  padding-top: var(--spacing-2);
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0;
}

/* Remove default disclosure triangle for subfolders */
.nav-folder-title::-webkit-details-marker {
  display: none;
}

.nav-folder-title::marker {
  display: none;
}

/* Add custom disclosure triangle for subfolders */
.nav-folder-title::before {
  content: '›';
  display: inline-block;
  font-size: var(--font-size-base);
  font-weight: 400;
  transition: transform 0.2s ease;
  width: 12px;
  text-align: center;
}

/* Rotate triangle when subfolder is open */
.nav-subfolder[open] > .nav-folder-title::before {
  transform: rotate(90deg);
}

.nav-folder-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--spacing-1);
  margin-left: 12px; /* Indent nested items */
}

/* Nested folder links inherit nav-section link styles */
.nav-subfolder a {
  display: block;
  padding: var(--spacing-1) var(--spacing-3);
  color: var(--color-link);
  text-decoration: none;
  font-size: var(--font-size-md);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.nav-subfolder a:hover {
  background-color: var(--color-border);
  color: var(--color-link-hover);
}

.nav-subfolder a.active {
  background-color: var(--color-border);
  color: var(--color-text-primary);
  font-weight: 600;
  border-left: 3px solid var(--color-highlight);
  padding-left: calc(var(--spacing-3) - 3px);
}

/* Adjust body for sidebar */
body {
  margin-left: 240px;
}

/* Hide mobile controls on desktop */
.sidebar-toggle,
.sidebar-toggle-label {
  display: none;
}

/* ============================================
   FOOTER
   ============================================ */

.doc-footer {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-6);
  margin-top: var(--spacing-8);
}

.footer-content {
  max-width: 800px;
  margin: 0;
  margin-left: min(75px, 5vw);
  padding: 0;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.footer-link {
  color: var(--color-link);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--color-link-hover);
}

.footer-copyright {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-accent {
  color: var(--color-accent);
}

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

.text-secondary {
  color: var(--color-text-secondary);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
  :root {
    --font-size-3xl: 24px;
    --font-size-2xl: 20px;
    --font-size-xl: 18px;
  }

  body {
    font-size: var(--font-size-md);
  }

  .container {
    padding: var(--spacing-4);
  }

  table {
    font-size: var(--font-size-sm);
  }

  th, td {
    padding: var(--spacing-1) var(--spacing-2);
  }

  /* Stack TOC normally on mobile */
  #TOC {
    float: none;
    max-width: 100%;
    margin: 0 0 var(--spacing-6) 0;
  }

  /* Reset body margin */
  body {
    margin-left: 0;
  }

  /* Hide sidebar by default, slide in from left */
  .doc-sidebar {
    left: -100%;
    width: 280px;
    transition: left 0.3s ease;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
  }

  /* Show sidebar when toggle is checked */
  .sidebar-toggle:checked ~ .doc-sidebar {
    left: 0;
  }

  /* Hamburger menu button */
  .sidebar-toggle-label {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: var(--spacing-4);
    left: var(--spacing-4);
    width: 44px;
    height: 44px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    z-index: 101;
    transition: left 0.3s ease, background-color 0.2s ease;
  }

  .sidebar-toggle-label:hover {
    background-color: var(--color-border);
  }

  /* Move toggle button to right edge of sidebar when open */
  .sidebar-toggle:checked ~ .sidebar-toggle-label {
    left: calc(280px - 44px - var(--spacing-4));
  }

  /* Hamburger icon (3 lines) */
  .hamburger,
  .hamburger::before,
  .hamburger::after {
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--color-text-primary);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .hamburger {
    position: relative;
  }

  .hamburger::before,
  .hamburger::after {
    content: '';
    position: absolute;
    left: 0;
  }

  .hamburger::before { top: -6px; }
  .hamburger::after { top: 6px; }

  /* Animate to X when open */
  .sidebar-toggle:checked ~ .sidebar-toggle-label .hamburger {
    background-color: transparent;
  }

  .sidebar-toggle:checked ~ .sidebar-toggle-label .hamburger::before {
    transform: rotate(45deg);
    top: 0;
  }

  .sidebar-toggle:checked ~ .sidebar-toggle-label .hamburger::after {
    transform: rotate(-45deg);
    top: 0;
  }

  /* Dark overlay when sidebar is open */
  .sidebar-toggle:checked ~ .doc-sidebar::after {
    content: '';
    position: fixed;
    top: 0;
    left: 280px;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }

  /* Add padding for hamburger button */
  .container {
    padding-top: calc(var(--spacing-6) + 44px);
  }

  /* Footer adjustments for mobile */
  .doc-footer {
    margin-left: 0;
    padding: var(--spacing-4);
  }

  .footer-nav {
    flex-direction: column;
    gap: var(--spacing-3);
  }
}

/* ============================================
   LABELS
   ============================================ */

/* Tighten h1 gap when labels follow it */
#title-block-header:has(.label-list) h1 {
  margin-bottom: var(--spacing-2);
}

.label-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-2);
  list-style: none;
  margin: 0 0 var(--spacing-8) 0;
  padding: 0;
}

.label {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.4;
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--brand-grey) 55%, transparent);
  color: var(--color-slate-11);
  background-color: color-mix(in srgb, var(--brand-grey) 10%, transparent);
}

/* Default labels: --color-slate-11 (#b0b4ba) gives 8.6:1 on composed dark bg ~#0e1920 (WCAG AAA) */

/* Preview labels use the highlight color to draw attention */
/* --brand-light-purple (#DDD3F6) gives 11.6:1 on composed dark bg ~#161f29 (WCAG AAA) */
.label[data-label*="preview"] {
  border-color: color-mix(in srgb, var(--brand-light-purple) 40%, transparent);
  color: var(--brand-light-purple);
  background-color: color-mix(in srgb, var(--brand-light-purple) 10%, transparent);
}

/* ============================================
   LIGHT THEME (OPTIONAL)
   ============================================ */

@media (prefers-color-scheme: light) {
  :root {
    /* Light theme colors - improved contrast and consistency */
    --color-background: var(--brand-white);  /* White background */
    --color-surface: #f7f7f7;
    --color-border: #e5e7eb;
    --color-text-primary: var(--brand-dark-blue);  /* Dark Blue text */
    --color-text-secondary: #5a6169;
    --color-text-muted: #6b7280;  /* Was #9ca3af, changed for WCAG AA (2.54:1 → 4.83:1) */

    /* Highlight color for light mode */
    --color-highlight: var(--brand-light-blue);  /* Light Blue for light mode */

    /* Use highlight color for consistency with sidebar */
    --color-accent: var(--color-highlight);
    --color-link: #5a6169;
    --color-link-hover: var(--brand-dark-blue);

    /* Code styling in light mode */
    --color-code-bg: #1e1e1e;
    --color-inline-code-bg: #f3f4f6;
    --color-inline-code-text: #1f2937;
  }

  pre {
    color: #d1d5db;
  }

  pre:hover {
    color: #f3f4f6;
  }

  /* Light mode breadcrumb hover - simple underline instead of accent color */
  .breadcrumb a:hover,
  .breadcrumb-api-link:hover {
    color: var(--color-text-primary);
    background-color: transparent;
    text-decoration: underline;
  }

  /* Light mode footer links - add underline on hover for consistency */
  .footer-link:hover {
    text-decoration: underline;
  }

  /* Light mode table styling - header and even rows in light grey */
  th {
    background-color: #f7f7f7;  /* Light grey for headers */
  }

  tr:nth-child(even) {
    background-color: #f7f7f7;  /* Light grey for even rows */
  }

  tr:hover {
    background-color: #e5e7eb;  /* Slightly darker grey on hover */
  }

  /* Inline UI icons - dark icons are visible on light backgrounds */
  .ui-icon {
    filter: none;
  }

  /* Labels: #4a4a4a text gives 7.2:1 on composed light bg ~#e7e7e7 (WCAG AAA) */
  .label {
    color: #4a4a4a;
    border-color: color-mix(in srgb, var(--brand-grey) 50%, transparent);
    background-color: color-mix(in srgb, var(--brand-grey) 15%, transparent);
  }

  /* Preview labels: blue palette, #1e40af text gives 7.5:1 contrast on pale blue bg (WCAG AAA) */
  .label[data-label*="preview"] {
    color: #1e40af;
    border-color: #1e40af;
    background-color: color-mix(in srgb, var(--brand-light-blue) 20%, transparent);
  }

  /* Light mode mobile sidebar adjustments */
  @media (max-width: 768px) {
    .doc-sidebar {
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);  /* Lighter shadow for light mode */
    }

    .sidebar-toggle:checked ~ .doc-sidebar::after {
      background-color: rgba(0, 0, 0, 0.2);  /* Lighter overlay for light mode */
    }
  }
}