/* base.css — reset, typography, layout primitives, and fonts.
 * Cascade layers establish predictable specificity for downstream sheets. */

@layer reset, base, layout, components, utilities, overrides;

/* ---------- Self-hosted fonts (operator-supplied .woff2). ---------- */
@font-face {
  font-family: 'Inter';
  src: url('/ui/assets/fonts/Inter.var.woff2') format('woff2-variations'),
       url('/ui/assets/fonts/Inter.var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/ui/assets/fonts/JetBrainsMono[wght].woff2') format('woff2-variations'),
       url('/ui/assets/fonts/JetBrainsMono[wght].woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset. ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }

  html, body { height: 100%; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  body {
    line-height: var(--lh-base);
    font-family: var(--font-sans);
    font-feature-settings: 'cv11', 'ss01', 'ss03';
  }

  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: none; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  table { border-collapse: collapse; border-spacing: 0; }
  textarea { resize: vertical; }

  :focus-visible {
    outline: 2px solid var(--fill-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  ::selection {
    background: color-mix(in oklch, var(--fill-accent) 30%, transparent);
    color: var(--text);
  }
}

/* ---------- Base typography. ---------- */
@layer base {
  body {
    background: var(--bg);
    color: var(--text);
    font-size: var(--text-base);
    line-height: var(--lh-base);
    transition: background-color var(--dur-slow) var(--ease-out-quart),
                color var(--dur-slow) var(--ease-out-quart);
  }

  h1 { font-size: var(--text-3xl); line-height: var(--lh-3xl); font-weight: 650; letter-spacing: -0.02em; }
  h2 { font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: 620; letter-spacing: -0.015em; }
  h3 { font-size: var(--text-xl);  line-height: var(--lh-xl);  font-weight: 600; letter-spacing: -0.01em; }
  h4 { font-size: var(--text-lg);  line-height: var(--lh-lg);  font-weight: 600; }
  h5 { font-size: var(--text-md);  line-height: var(--lh-md);  font-weight: 600; }
  h6 { font-size: var(--text-sm);  line-height: var(--lh-sm);  font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }

  small { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--text-muted); }
  code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }

  a:where(:not([class])) {
    color: var(--text-link);
    text-decoration-color: color-mix(in oklch, var(--text-link) 35%, transparent);
    text-underline-offset: 3px;
    transition: color var(--dur-fast) var(--ease-out-quart);
  }
  a:where(:not([class])):hover { color: var(--fill-accent); text-decoration-color: currentColor; }

  hr {
    border: 0;
    height: 1px;
    background: var(--border);
    margin-block: var(--space-6);
  }
}

/* ---------- Layout primitives. ---------- */
@layer layout {
  .app-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 52px 1fr;
    grid-template-areas:
      "brand topbar"
      "sidebar main";
    min-height: 100vh;
  }

  .app-shell > .topbar  { grid-area: topbar; }
  .app-shell > .brand   { grid-area: brand; }
  .app-shell > .sidebar { grid-area: sidebar; }
  .app-shell > main     { grid-area: main; min-width: 0; }

  @container (max-width: 720px) {
    .app-shell {
      grid-template-columns: 1fr;
      grid-template-areas:
        "topbar"
        "main";
    }
    .app-shell > .sidebar, .app-shell > .brand { display: none; }
  }

  .page {
    padding: var(--space-8) var(--space-8);
    max-width: 1240px;
    margin-inline: auto;
    width: 100%;
  }

  .page__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  .page__title { font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: 620; letter-spacing: -0.015em; }
  .page__subtitle { color: var(--text-muted); margin-top: var(--space-1); }

  .stack { display: flex; flex-direction: column; }
  .stack-2 > * + * { margin-top: var(--space-2); }
  .stack-3 > * + * { margin-top: var(--space-3); }
  .stack-4 > * + * { margin-top: var(--space-4); }
  .stack-6 > * + * { margin-top: var(--space-6); }
  .stack-8 > * + * { margin-top: var(--space-8); }

  .row { display: flex; align-items: center; gap: var(--space-3); }
  .row--between { justify-content: space-between; }
  .row--wrap { flex-wrap: wrap; }
  .grow { flex: 1; min-width: 0; }
}

/* ---------- Utilities. ---------- */
@layer utilities {
  .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
  }

  .mono { font-family: var(--font-mono); font-feature-settings: 'zero', 'ss02'; }
  .mono--sm { font-size: var(--text-xs); }

  .break-all { word-break: break-all; overflow-wrap: anywhere; }

  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

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

  .hidden { display: none !important; }
}

/* ---------- Reduced motion. ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---------- View Transitions defaults. ---------- */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur-normal);
  animation-timing-function: var(--ease-out-quart);
}