/*
 * ⚠️  DO NOT MODIFY CLASS STRUCTURE
 * 
 * This is a REFERENCE theme used as template for theme generation.
 * Changing class names or removing classes will break theme generator.
 * 
 * You MAY modify:
 * - Default values (padding, colors, sizes)
 * - Add new classes
 * 
 * You MUST NOT:
 * - Rename existing classes
 * - Remove existing classes
 * - Change selector structure
 */

/* ==========================================================================
   01-BASE - Base tokens
   ========================================================================== */

/* THE SCROLLBAR GUTTER IS ALWAYS THERE, whether or not the page is long enough to need it.
   Without this the whole layout jumps sideways by the width of the scrollbar every time content
   crosses the height of the window -- which on a filtered grid happens while the user is typing,
   with the cursor still in the search box and the row of controls sliding out from under it.
   Adding a class would not do: this belongs to the scrolling element itself.
   NOTE: this adds a rule rather than changing one, which the header above explicitly allows. */
[data-theme="explain-ink"] {
  scrollbar-gutter: stable;
}

[data-theme="explain-ink"] .theme-base-radius {
  border-radius: var(--radius-lg);
}

[data-theme="explain-ink"] .theme-base-shadow {
  box-shadow: var(--shadow-lg);
}

[data-theme="explain-ink"] .theme-base-border {
  border: 1px solid var(--color-border-primary);
}

[data-theme="explain-ink"] .theme-base-borderNone {
  border: none;
}

[data-theme="explain-ink"] .theme-base-spacing-sm {
  margin: var(--spacing-sm);
}

[data-theme="explain-ink"] .theme-base-spacing-md {
  margin: var(--spacing-md);
}

[data-theme="explain-ink"] .theme-base-animation-duration {
  transition-duration: 300ms;
}

[data-theme="explain-ink"] .theme-base-animation-easing {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="explain-ink"] .theme-base-zIndex {
  z-index: 10;
}

[data-theme="explain-ink"] .theme-border {
  border: 1px solid var(--color-border-primary);
}

/* ========================================================================== 
   PAGE BACKGROUND
   ========================================================================== */

html[data-theme="explain-ink"] body {
  background: var(--app-background-fill, var(--color-bg-primary));
  color: var(--color-text-primary);
}

/* ========================================================================== 
   GRID BACKGROUND
   ========================================================================== */

[data-theme="explain-ink"] body::before,
html[data-theme="explain-ink"] body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* chalk-dust smudges on the board (replaces tech grid) */
  background-image:
    radial-gradient(120% 95% at 22% 12%, rgba(241, 237, 228, 0.05), transparent 72%),
    radial-gradient(115% 95% at 82% 88%, rgba(241, 237, 228, 0.04), transparent 72%),
    radial-gradient(130% 100% at 60% 50%, rgba(241, 237, 228, 0.022), transparent 74%),
    radial-gradient(90% 80% at 92% 28%, rgba(241, 237, 228, 0.03), transparent 70%);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: -1;
  pointer-events: none;
}