/* ==========================================================================
   Base: reset, typography, layout primitives, utilities
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  min-height: 100dvh;
}
body[data-layout="app"], body[data-layout="admin"], body[data-layout="org"] {
  font-size: var(--fs-app-body);
  background: var(--surface);
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-strong); }
p, li { text-wrap: pretty; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
hr { border: 0; border-top: 1px solid var(--border); }
::selection { background: var(--primary-soft-2); color: var(--ink); }

/* ---- Headings ---- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--fs-h2); line-height: 1.1; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
.display { font-size: var(--fs-display); line-height: 1; letter-spacing: var(--tracking-display); font-weight: 600; font-variation-settings: "opsz" 96; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: var(--measure); }
.small { font-size: var(--fs-small); }
.xs { font-size: var(--fs-xs); }
.muted { color: var(--muted); }
.ink-2 { color: var(--ink-2); }
.measure { max-width: var(--measure); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.text-primary { color: var(--primary); }
.text-balance { text-wrap: balance; }
.font-display { font-family: var(--font-display); }
.w-500 { font-weight: 500; } .w-600 { font-weight: 600; } .w-700 { font-weight: 700; }
.center { text-align: center; }

/* Product register headings */
body[data-layout="app"] h1, body[data-layout="admin"] h1, body[data-layout="org"] h1 { font-size: var(--fs-app-h1); letter-spacing: -0.015em; line-height: 1.2; }
body[data-layout="app"] h2, body[data-layout="admin"] h2, body[data-layout="org"] h2 { font-size: var(--fs-app-h2); letter-spacing: -0.01em; }
body[data-layout="app"] h3, body[data-layout="admin"] h3, body[data-layout="org"] h3 { font-size: var(--fs-app-h3); letter-spacing: 0; font-family: var(--font-body); font-weight: 600; }

/* ---- Focus ---- */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
.section-drench :focus-visible, .drench :focus-visible { outline-color: var(--accent); }

/* ---- Containers ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: var(--container-wide); }
.container-narrow { max-width: var(--container-narrow); }

/* ---- Grid & flex primitives ---- */
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.flex { display: flex; gap: var(--s-3); }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.col { display: flex; flex-direction: column; gap: var(--s-3); }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); } .gap-7 { gap: var(--s-7); }
.grow { flex: 1 1 auto; }
.shrink-0 { flex-shrink: 0; }
.w-full { width: 100%; }
.ml-auto { margin-left: auto; }

/* Spacing utilities */
.mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); }
.mb-1 { margin-bottom: var(--s-1); } .mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); } .mb-7 { margin-bottom: var(--s-7); }
.p-4 { padding: var(--s-4); } .p-5 { padding: var(--s-5); } .p-6 { padding: var(--s-6); }
.py-section { padding-block: var(--section); }
.py-section-tight { padding-block: var(--section-tight); }

/* ---- Utilities ---- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.hide-mobile { display: initial; }
.show-mobile { display: none; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relative { position: relative; }
.overflow-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rounded { border-radius: var(--r-card); }
.divider { border-top: 1px solid var(--border); }
.skip-link { position: absolute; left: var(--s-4); top: -100px; background: var(--ink); color: var(--bg); padding: var(--s-2) var(--s-4); border-radius: var(--r-ctl); z-index: var(--z-tooltip); }
.skip-link:focus { top: var(--s-4); }

@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hide-mobile { display: none !important; }
  .show-mobile { display: initial; }
}

/* ---- Reduced motion (global) ---- */
@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; }
}