/* SPDX-License-Identifier: AGPL-3.0-only
   Reset, element defaults, typography, utilities, focus and motion preferences. */

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

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* the sticky header must not cover an anchor target */
    scroll-padding-top: 88px;
  }

  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
    margin: 0;
  }

  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

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

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

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

  /* Author styles like .btn { display:inline-flex } would beat the UA's
     [hidden] rule — one global rule keeps the attribute trustworthy. */
  [hidden] { display: none !important; }

  a { color: inherit; }

  :where(h1, h2, h3, h4) { text-wrap: balance; }
  :where(p, li) { text-wrap: pretty; }
}

@layer base {
  /* Variable Inter, latin subset, self-hosted. No third-party request ever. */
  @font-face {
    font-family: "Inter";
    src: url("../fonts/inter-var-latin.woff2") format("woff2-variations");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2192,
                   U+2193, U+21C4, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  /* Three tiny Noto subsets carrying exactly what the language row prints
     (中文, हिन्दी, العربية) — under 7 KB together. The Arabic one keeps its
     shaping features (init/medi/fina/rlig), or the letters would not join. */
  @font-face {
    font-family: "HAC SC";
    src: url("../fonts/noto-sc-sub.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+4E2D, U+6587;
  }
  @font-face {
    font-family: "HAC Deva";
    src: url("../fonts/noto-deva-sub.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0900-097F;
  }
  @font-face {
    font-family: "HAC Arab";
    src: url("../fonts/noto-arabic-sub.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0627-0629, U+0631, U+0639, U+0644, U+064A;
  }

  /* Metric-matched fallback: the swap from system font to Inter must not move
     a single line of text (this is where "cheap" usually shows up). */
  @font-face {
    font-family: "Inter Fallback";
    src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
    size-adjust: 107%;
    ascent-override: 90%;
    descent-override: 22.43%;
    line-gap-override: 0%;
  }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  h1 {
    font-size: var(--fs-3xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    font-weight: 700;
  }

  h2 {
    font-size: var(--fs-2xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    font-weight: 600;
  }

  h3 {
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    font-weight: 600;
  }

  h4 { font-size: var(--fs-base); font-weight: 600; }

  p { max-width: var(--measure); }

  a {
    color: var(--accent-text);
    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
    text-underline-offset: 0.18em;
    transition: color var(--dur-1) var(--ease-out),
                text-decoration-color var(--dur-1) var(--ease-out);
  }

  a:hover { text-decoration-color: currentColor; }

  code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }

  strong { font-weight: 600; color: var(--text); }

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

  ::selection {
    background: color-mix(in oklab, var(--accent) 35%, transparent);
    color: var(--text);
  }

  :focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: inherit;
  }
  /* Nothing removes the ring. Ever. */
  :focus:not(:focus-visible) { outline: none; }
}

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

  .section {
    padding-block: var(--section-y);
    scroll-margin-top: 80px;
  }

  .section + .section { padding-block-start: 0; }

  .section__head {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-block-end: var(--sp-10);
    max-width: 68ch;
  }

  .eyebrow {
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin: 0;
  }

  .lede {
    font-size: var(--fs-md);
    color: var(--text-2);
    max-width: 58ch;
  }
}

@layer utilities {
  .visually-hidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: absolute;
    inset-inline-start: var(--sp-4);
    inset-block-start: var(--sp-4);
    z-index: 100;
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--r-8);
    background: var(--accent-btn-bg);
    color: var(--accent-btn-fg);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--dur-2) var(--ease-out);
  }
  .skip-link:focus-visible { transform: translateY(0); }

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

@layer overrides {
  /* One global switch. Distance goes to zero, long moves collapse; short fades
     stay, because a fade is not a vestibular trigger. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-2: 1ms;
      --dur-3: 120ms;
      --dur-4: 120ms;
      --dur-5: 1ms;
      --move: 0px;
    }
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
    }
    .tabs__ink { transition-duration: 1ms !important; }
  }

  /* Forced colours (Windows high contrast): let the OS win, keep structure. */
  @media (forced-colors: active) {
    .btn, .tab, .copy { forced-color-adjust: none; }
    .tabs__ink { forced-color-adjust: none; background: Highlight; }
    .tab[aria-selected="true"] { border-block-end: 3px solid Highlight; }
    .btn--primary { background: ButtonText; color: ButtonFace; border: 1px solid ButtonText; }
    .btn--bmc, .btn--kofi { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; }
    .card, .tabs__panels { border: 1px solid CanvasText; }
    :focus-visible { outline: 2px solid Highlight; }
  }
}