/* Reset, typography scale, and layout primitives. */

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--on-background);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* --- Typography scale -------------------------------------------------- */

.headline-lg {
  font-family: var(--font-headline);
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.02em;
}

.headline-md {
  font-family: var(--font-headline);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.01em;
}

.body-lg {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.body-md {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.code-md {
  font-family: var(--font-code);
  font-size: 14px;
  font-weight: 450;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
}

.code-sm {
  font-family: var(--font-code);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

.label-caps {
  font-family: var(--font-code);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* DESIGN.md: headline-lg scales down on mobile to keep layout integrity. */
@media (max-width: 640px) {
  .headline-lg {
    font-size: 24px;
    line-height: 32px;
  }
}

/* --- Colour utilities --------------------------------------------------- */

.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-error { color: var(--error); }
.text-tertiary { color: var(--tertiary); }
.text-warning { color: var(--warning); }
.text-muted { color: var(--on-surface-variant); }
.text-outline { color: var(--outline); }

/* --- Elevation: tonal layering with 1px outlines, never shadows ---------- */

.surface-1 {
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
}

.surface-2 {
  background: var(--surface-container-high);
  border: 1px solid var(--outline-variant);
}

/* --- Layout primitives -------------------------------------------------- */

.row {
  display: flex;
  align-items: center;
}

.col {
  display: flex;
  flex-direction: column;
}

.gap-sm { gap: var(--stack-sm); }
.gap-md { gap: var(--stack-md); }
.gap-lg { gap: var(--stack-lg); }
.spacer { flex: 1; }

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

.icon-sm { font-size: 16px; }
.icon-md { font-size: 18px; }
.icon-fill { font-variation-settings: "FILL" 1; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Area J8: off-screen until focused, so keyboard/screen-reader use can
   jump straight past the sidebar nav to the routed view. */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--stack-md);
  z-index: 100;
  padding: var(--stack-sm) var(--stack-md);
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius);
}

.skip-link:focus {
  top: var(--stack-sm);
}

/* Scrollbars tuned for the dark canvas. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-container-highest) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: var(--surface-container-highest);
  border-radius: var(--radius-full);
  border: 3px solid transparent;
  background-clip: content-box;
}