/* ==========================================================
   HIJAMA-V3 · BASE  —  Layer 2 of 5
   Reset + typography defaults + focus + utilities.
   Depends on: tokens.css
   Uses logical properties (margin-inline, padding-block, …)
   for RTL future-proofing from day 1.
   ========================================================== */

/* ─── Reset ─────────────────────────────────────────────── */

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

html {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light dark;
  tab-size: 4;
}

body {
  min-height: 100svh;
  min-height: 100vh; /* fallback */
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  transition:
    background var(--dur-base) var(--ease-out),
    color      var(--dur-base) var(--ease-out);
}

img, picture, svg, video, canvas, iframe {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

svg { fill: currentColor; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

/* appearance: none voor text/number/search/etc — NIET voor checkboxes/radios/files */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
button, select, textarea {
  appearance: none;
  -webkit-appearance: none;
}

/* Checkboxes + radios — native rendering behouden met brand-kleur */
input[type="checkbox"],
input[type="radio"] {
  inline-size: 18px;
  block-size: 18px;
  accent-color: var(--brand);
  cursor: pointer;
  flex-shrink: 0;
}

button { cursor: pointer; }

a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--brand-hover); }

ul, ol { list-style: none; }

/* ─── Typography ────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); font-weight: var(--fw-semi); }
h4 { font-size: var(--text-lg); font-weight: var(--fw-semi); font-family: var(--font-body); }
h5, h6 { font-size: var(--text-md); font-weight: var(--fw-semi); font-family: var(--font-body); }

p {
  max-inline-size: 72ch;
  text-wrap: pretty;
}

small { font-size: var(--text-sm); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }
code {
  padding: 0.1em 0.35em;
  background: var(--bg-soft);
  border-radius: var(--r-xs);
  color: var(--text);
}

/* RTL — Arabic uses Amiri serif at slightly larger baseline */
html[dir='rtl'] body        { font-family: var(--font-arabic); font-size: 1.05rem; }
html[dir='rtl'] h1,
html[dir='rtl'] h2,
html[dir='rtl'] h3          { font-family: var(--font-arabic); }

/* ─── Focus ─────────────────────────────────────────────── */

:focus { outline: none; }

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

/* ─── Global motion kill-switch ─────────────────────────── */
/* Tokens (--dur-*) already collapse to 0ms in reduced-motion, but
   keyframe shorthands with hard-coded durations (heroFloat, pulses,
   shimmers) bypass that. This catches them — keep state, drop motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

::selection {
  background: var(--brand-weak);
  color: var(--brand-strong);
}

/* ─── Skip link ─────────────────────────────────────────── */

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a.visually-hidden:focus,
a.visually-hidden:focus-visible {
  position: fixed;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  inline-size: auto;
  block-size: auto;
  padding: var(--sp-3) var(--sp-5);
  clip: auto;
  background: var(--brand);
  color: var(--brand-on);
  border-radius: var(--r-md);
  font-weight: var(--fw-semi);
  z-index: var(--z-toast);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}

/* ─── Containers ────────────────────────────────────────── */

.container         { inline-size: min(100% - var(--sp-6), var(--container));         margin-inline: auto; }
.container-narrow  { inline-size: min(100% - var(--sp-6), var(--container-narrow));  margin-inline: auto; }
.container-tight   { inline-size: min(100% - var(--sp-6), var(--container-tight));   margin-inline: auto; }
.container-wide    { inline-size: min(100% - var(--sp-6), var(--container-wide));    margin-inline: auto; }

@media (min-width: 1024px) {
  .container, .container-narrow, .container-tight, .container-wide {
    padding-inline: var(--container-pad-lg);
  }
}

/* ─── Stack (vertical rhythm) ───────────────────────────── */

.stack > * + *    { margin-block-start: var(--sp-4); }
.stack-sm > * + * { margin-block-start: var(--sp-2); }
.stack-lg > * + * { margin-block-start: var(--sp-6); }
.stack-xl > * + * { margin-block-start: var(--sp-10); }

/* ─── Cluster (inline spacing) ──────────────────────────── */

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* ─── TBD placeholder (business-data not filled) ────────── */

.tbd {
  color: var(--text-faint);
  font-style: italic;
  cursor: help;
  border-block-end: 1px dashed var(--border-strong);
}

/* ─── Eyebrow label ─────────────────────────────────────── */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand);
}

/* ─── Divider ───────────────────────────────────────────── */

.divider {
  inline-size: 60px;
  block-size: 3px;
  background: var(--brand);
  border-radius: var(--r-pill);
  border: 0;
  margin-block: var(--sp-4);
}

/* ─── Skeleton loading states ───────────────────────────── */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-soft)   0%,
    var(--bg-muted)  50%,
    var(--bg-soft)  100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
}

.skeleton-text  { block-size: 1em;     margin-block: var(--sp-2); }
.skeleton-title { block-size: 2em;     inline-size: 60%; }
.skeleton-block { block-size: 120px; }

@keyframes skeleton-shimmer {
  from { background-position:  100% 0; }
  to   { background-position: -100% 0; }
}

/* ─── Print ─────────────────────────────────────────────── */

@media print {
  body { background: white; color: black; }
  .no-print, nav, footer { display: none !important; }
  a::after { content: ' (' attr(href) ')'; font-size: 0.85em; color: #555; }
}