/* =========================================================
   MINDBURN LABS — BASE
   Resets, body defaults, utilities, grid paper background
   ========================================================= */

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

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background var(--dur-mid) var(--ease-standard),
              color var(--dur-mid) var(--ease-standard);
}

img, svg, video { display: block; max-width: 100%; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

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

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

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

::selection { background: var(--ink); color: var(--ink-inverse); }

/* ---------- Type utilities ---------- */
.t-display-xxl { font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, 8vw, 120px); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-optical-sizing: auto; font-variation-settings: "SOFT" 20, "WONK" 0; }
.t-display-xl  { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 6vw, 84px); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.t-display-lg  { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-5xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
.t-display-md  { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-4xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); }
.t-display-sm  { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-3xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); }

.t-body-lg  { font-size: var(--fs-lg); line-height: var(--lh-body); letter-spacing: var(--tracking-snug); }
.t-body     { font-size: var(--fs-md); line-height: var(--lh-body); }
.t-body-sm  { font-size: var(--fs-sm); line-height: var(--lh-body); }

.t-label    { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-3); font-weight: 500; }
.t-label-lg { font-family: var(--font-mono); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-3); font-weight: 500; }
.t-mono     { font-family: var(--font-mono); font-size: var(--fs-sm); }
.t-mono-xs  { font-family: var(--font-mono); font-size: var(--fs-xs); }
.t-caption  { font-size: var(--fs-xs); color: var(--ink-3); }

/* ---------- Layout utilities ---------- */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); } .gap-8 { gap: var(--space-8); }

/* ---------- Grid paper background (signature pattern) ---------- */
.surface-grid {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}

.surface-grid-strong {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Ticked ruler — for brand moments + spacing demos */
.surface-rule {
  background-color: var(--bg);
  background-image: linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px);
  background-size: 8px 100%;
}

/* Focus */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-2);
}

/* Scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--line-2); }