/* ==========================================================================
   SAFRII v3 — Base Styles
   Modern reset + global element defaults. Loaded right after tokens.css.
   ========================================================================== */

/* ---- Modern Reset ------------------------------------------------------- */

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Safe area inset variables for notched devices */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

body {
  min-height: 100vh;
  min-height: 100dvh;          /* honour dynamic viewport (mobile address bar) */
  background-color: var(--bg);
  color: var(--ink-soft);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Smooth theme transition without making it feel laggy */
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

/* When the off-canvas drawer is open we lock body scroll via this class */
body.is-locked {
  overflow: hidden;
}

/* ---- Media defaults ----------------------------------------------------- */

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  font-style: italic;          /* alt text styled when images fail */
}

/* ---- Forms keep their font ---------------------------------------------- */

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

button {
  background: none;
  border: none;
  cursor: pointer;
}

/* ---- Headings ----------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  text-wrap: balance;          /* nicer headline wrapping where supported */
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

/* Utility classes for the bigger display sizes when needed inline */
.t-display-1 {
  font-family: var(--ff-display);
  font-size: var(--fs-display-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

.t-display-2 {
  font-family: var(--ff-display);
  font-size: var(--fs-display-2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

.t-kicker {
  font-family: var(--ff-mono);
  font-size: var(--fs-kicker);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-extra);
  text-transform: uppercase;
  color: var(--ink-dim);
}

.t-mono {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
}

/* ---- Paragraphs --------------------------------------------------------- */

p {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ---- Links -------------------------------------------------------------- */

a {
  color: var(--ink);
  text-decoration: none;
  /* Subtle text underline animation by default — components override as needed */
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}

a:hover,
a:focus-visible {
  background-size: 100% 2px;
}

/* Links inside components (cards, buttons, nav) opt out of the underline */
a[class] {
  background-image: none;
}

/* ---- Lists -------------------------------------------------------------- */

ul, ol {
  list-style: none;
}

/* ---- Selection ---------------------------------------------------------- */

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

/* ---- Focus ring --------------------------------------------------------- */
/* Killing the default ring only when not keyboard-navigating, then forcing
   a fat lime ring on :focus-visible keeps both pretty AND accessible.       */

:focus {
  outline: none;
}

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

/* ---- Horizontal rule ---------------------------------------------------- */

hr {
  border: none;
  border-top: var(--bd-2);
  margin: var(--sp-8) 0;
}

/* ---- Custom scrollbar — chunky neobrutalist look (WebKit) -------------- */

@media (pointer: fine) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--ink) var(--bg-soft);
  }

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

  *::-webkit-scrollbar-track {
    background: var(--bg-soft);
    border-left: var(--bd-2);
  }

  *::-webkit-scrollbar-thumb {
    background: var(--ink);
    border: 2px solid var(--bg-soft);
  }

  *::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
  }
}

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

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-md {
  width: 100%;
  max-width: var(--container-md);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-sm {
  width: 100%;
  max-width: var(--container-sm);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Vertical rhythm helpers */
.section {
  padding-block: clamp(3rem, 8vw, 6rem);
}

.section-tight {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

/* ---- Skip link (a11y) --------------------------------------------------- */

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--accent);
  color: var(--ink-on-accent);
  font-family: var(--ff-mono);
  font-weight: var(--fw-bold);
  border: var(--bd-2);
  transform: translateY(-150%);
  transition: transform var(--dur) var(--ease);
  z-index: var(--z-toast);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ---- Visually hidden (a11y) -------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Theme transition flash kill --------------------------------------- */
/* When the user toggles light/dark, prevent images/colored boxes from
   flickering badly during the swap. Add via JS during the transition. */

.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease) !important;
}