/*
 * theme_scope.css — Theme Boundary & Resets
 * ==========================================
 * Defines what .themed is allowed to affect.
 * No global element overrides.
 * All rules MUST be prefixed with .themed.
 *
 * GOVERNED BY: CLAUDE_UI_LOCK.md
 */

/* =============================================================================
   BODY-LEVEL THEME SCOPE
   ============================================================================= */

/* Apply canvas background and base font when theme is active */
.themed {
  background-color: var(--color-canvas);
  color: var(--color-text-base);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Universal box-sizing within theme scope */
.themed *,
.themed *::before,
.themed *::after {
  box-sizing: border-box;
}

/* =============================================================================
   LINK BASELINE
   ============================================================================= */

.themed a {
  color: var(--color-text-link);
  text-decoration: none;
}

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

/* =============================================================================
   SCROLLBAR REFINEMENT (Webkit)
   ============================================================================= */

.themed ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.themed ::-webkit-scrollbar-track {
  background: var(--color-surface-muted);
}

.themed ::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
}

.themed ::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-subtle);
}

/* =============================================================================
   FOCUS RING (Accessibility)
   ============================================================================= */

.themed :focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* =============================================================================
   SELECTION
   ============================================================================= */

.themed ::selection {
  background-color: var(--color-primary-100);
  color: var(--color-primary-900);
}

/* =============================================================================
   PRINT SCOPE — Theme resets for print
   ============================================================================= */

@media print {
  .themed {
    background-color: white !important;
    color: black !important;
    font-size: 12pt;
  }

  .themed .t-sidebar,
  .themed .t-header,
  .themed .t-parent-navbar,
  .themed .no-print {
    display: none !important;
  }

  .themed .t-page-wrapper {
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* =============================================================================
   HTMX INDICATOR REFINEMENTS
   (Scoped to .themed — does not override global HTMX behavior)
   ============================================================================= */

.themed .htmx-indicator {
  display: none;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.themed .htmx-request .htmx-indicator {
  display: inline-flex;
  opacity: 1;
}

.themed .htmx-request .htmx-indicator-opposite {
  display: none;
}

/* =============================================================================
   ALPINE.JS CLOAK
   ============================================================================= */

.themed [x-cloak] {
  display: none !important;
}