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

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  overflow: hidden;
}

button { font-family: inherit; color: inherit; cursor: pointer; }
input, textarea { font-family: inherit; color: inherit; }

/* Without this the browser paints its own selection highlight — a saturated
   blue that is, in a palette with no other chroma in it, the loudest thing on
   the page. ::selection does not inherit, so ::-moz-selection is declared in a
   separate rule: a selector list containing one unsupported pseudo-element
   invalidates the whole rule. */
::selection { background: var(--color-selection); color: var(--color-selection-text); }
::-moz-selection { background: var(--color-selection); color: var(--color-selection-text); }

.mono { font-family: var(--font-mono); }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.3; }
h1 { font-size: var(--font-size-lg); }
h2 { font-size: var(--font-size-md); }
h3 { font-size: var(--font-size-base); }
h4 { font-size: var(--font-size-sm); }

code, pre { font-family: var(--font-mono); font-size: 0.875em; }

pre {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  margin: var(--space-3) 0;
}

code {
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

pre code { background: none; padding: 0; }

ul, ol { padding-inline-start: var(--space-5); margin-bottom: var(--space-3); }
li { margin-bottom: var(--space-1); }

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

/* The one place chroma survives in the chrome. --color-primary is now neutral,
   so reusing it here would make keyboard focus nearly invisible against the
   surfaces it lands on. See the palette note in variables.css. */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-surface-3);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-strong);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* Utility Classes for Frontend Refactoring */

/* Display utilities */
.hidden { display: none !important; }
.visible { display: block !important; }
.inline { display: inline !important; }
.inline-block { display: inline-block !important; }

/* Visibility utilities */
.opacity-dim { opacity: 0.6; }
.opacity-full { opacity: 1; }

/* Flex utilities */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

/* Spacing utilities */
.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }

.m-0 { margin: 0; }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }

/* Width/Height utilities */
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-auto { width: auto; }
.h-auto { height: auto; }

/* Text utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
/* Direction-aware siblings: these follow the document's writing direction. */
.text-start { text-align: start; }
.text-end { text-align: end; }

/* Cursor utilities */
.cursor-pointer { cursor: pointer; }

/* ---------------------------------------------------------------------------
 * Glass surfaces
 *
 * Four levels, chosen by how far the surface floats above the page rather than
 * by how it looks: .glass-subtle (inline, barely lifted) → .glass (panels and
 * sidebars) → .glass-strong (composer, popovers) → .glass-overlay (modals).
 * Pick by elevation and the frost follows; do not mix a level's blur with
 * another's background.
 *
 * Every level is one class. Component CSS should apply .glass rather than
 * re-declaring backdrop-filter — there is exactly one correct blur/background
 * pairing per level and it lives here.
 * ------------------------------------------------------------------------- */
.glass,
.glass-subtle,
.glass-strong,
.glass-overlay {
  /* Own stacking context: backdrop-filter samples what is painted behind the
     element, so a glass surface must not be flattened into its parent's layer. */
  isolation: isolate;
}

.glass-subtle {
  background: var(--glass-bg-subtle);
  backdrop-filter: var(--glass-filter-sm);
  -webkit-backdrop-filter: var(--glass-filter-sm);
  border: 1px solid var(--color-border-subtle);
}

.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
}

.glass-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-filter-lg);
  -webkit-backdrop-filter: var(--glass-filter-lg);
  border: 1px solid var(--glass-border-strong);
  box-shadow: var(--shadow-glass);
}

.glass-overlay {
  background: var(--color-scrim);
  backdrop-filter: var(--glass-filter-sm);
  -webkit-backdrop-filter: var(--glass-filter-sm);
}

/* Edge modifiers, for glass that meets the viewport on one side (sidebars, top
   bar) and so needs a single hairline rather than a full border. */
.glass-edge-inline-end { border: none; border-inline-end: 1px solid var(--glass-border); }
.glass-edge-inline-start { border: none; border-inline-start: 1px solid var(--glass-border); }
.glass-edge-block-end { border: none; border-block-end: 1px solid var(--glass-border); }

/* backdrop-filter is ~96% supported, but the ~4% without it would get an
   unreadable 40%-opacity panel over live content. Opt them into a solid fill. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-subtle { background: var(--color-surface); }
  .glass { background: var(--color-surface); }
  .glass-strong { background: var(--color-surface-2); }
  .glass-overlay { background: var(--color-scrim); }
}

/* backdrop-filter forces GPU compositing on every scroll of the content behind
   it. Users who asked for reduced motion are disproportionately those on
   hardware where that stutters, so drop the frost and keep the colour. */
@media (prefers-reduced-motion: reduce) {
  .glass-subtle, .glass, .glass-strong, .glass-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .glass-subtle, .glass { background: var(--color-surface); }
  .glass-strong { background: var(--color-surface-2); }
}

/* Elevation utilities — depth via diffused shadow, never a hard edge. */
.elevate-xs { box-shadow: var(--shadow-xs); }
.elevate-sm { box-shadow: var(--shadow-sm); }
.elevate-md { box-shadow: var(--shadow-md); }
.elevate-lg { box-shadow: var(--shadow-lg); }