/* ================================================
   DISARM — Base Styles
   Global typography, body defaults, font imports
   ================================================ */

/* Google Fonts are now loaded efficiently via <link> in partials/head.php */

/* ---- Local Font: Sui Generis Bold Italic (from DSRM Type Guide — 00_callouts) ---- */
@font-face {
  font-family: 'Sui Generis';
  src: url('../assets/fonts/SuiGeneris-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---- HTML root: reserve scrollbar space to prevent layout shift on unlock ---- */
html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  /* Paint the root itself dark. scrollbar-gutter:stable reserves a strip
     on the right edge even while scrolling is locked during load — with
     no background on <html> that strip shows the browser's white canvas
     (the "white block" on first paint). This keeps it --color-bg always. */
  background-color: var(--color-bg);
}

/* Firefox can only recolour its scrollbar (no shaping), so keep the rail dark
   with a cyan thumb there. Chromium must NOT get these two properties: since
   Chrome 121 setting either one switches off every ::-webkit-scrollbar-*
   rule below and brings back the native rounded thumb with arrow buttons. */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--color-4) var(--color-bg);
  }
}

/* ---- Custom Scrollbar (WebKit) ----
   Square edges (no border-radius) + a 45° hatch on the thumb so it
   echoes the diagonal accents used elsewhere (.btt-shape / .btt-lines,
   .progress-slant). The track, corner and end-buttons are all forced
   to --color-bg so the reserved gutter never flashes white. */
::-webkit-scrollbar {
  width: 10px;
  background: var(--color-bg);
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
  border-left: 1px solid rgba(80, 255, 238, 0.12);
}

/* Sharp thumb: both ends are cut on a 45° diagonal (top-left and
   bottom-right corners, so the two cuts are parallel — a slanted blade).
   Scrollbar pseudo-elements can't take clip-path or radii-free shapes, so the
   cuts are two triangles painted in the track colour on top of the hatch and
   the fill. Layers, top → bottom: cut, cut, hatch, fill. The 6px tiles match
   the thumb's drawn width (10px bar − 2×2px inset). */
::-webkit-scrollbar-thumb {
  background-image:
    linear-gradient(135deg, var(--color-bg) 4.25px, transparent 4.25px),
    linear-gradient(-45deg, var(--color-bg) 4.25px, transparent 4.25px),
    repeating-linear-gradient(
      -45deg,
      rgba(13, 20, 28, 0.55) 0px,
      rgba(13, 20, 28, 0.55) 1px,
      transparent 1px,
      transparent 5px
    ),
    linear-gradient(var(--color-4), var(--color-4)); /* Cyan accent */
  background-size: 6px 6px, 6px 6px, auto, auto;
  background-position: top left, bottom right, 0 0, 0 0;
  background-repeat: no-repeat;
  border-radius: 0; /* straight edges, not rounded */
  border: 2px solid var(--color-bg); /* inset padding effect */
}

::-webkit-scrollbar-thumb:hover {
  /* same layers, fill switched to mint — never white */
  background-image:
    linear-gradient(135deg, var(--color-bg) 4.25px, transparent 4.25px),
    linear-gradient(-45deg, var(--color-bg) 4.25px, transparent 4.25px),
    repeating-linear-gradient(
      -45deg,
      rgba(13, 20, 28, 0.55) 0px,
      rgba(13, 20, 28, 0.55) 1px,
      transparent 1px,
      transparent 5px
    ),
    linear-gradient(#9ee5de, #9ee5de);
}

/* Kill the light default fills in the reserved gutter */
::-webkit-scrollbar-corner {
  background: var(--color-bg);
}

::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* ---- Body ---- */
body {
  font-family: var(--font-primary);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  background-image: url('../assets/images/backgrounds/DSRM_large_backround_V1_1920x3240_ja_260730.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow-x: hidden;
}

/* ---- Heading Hierarchy ---- */
/* H1 — Titulo principal core: Anek Tamil SemiBold 63px */
h1 {
  font-family: var(--font-primary);
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

/* H2 — Subtitulo: Saira Medium 34px */
h2 {
  font-family: var(--font-secondary);
  font-size: var(--text-h2);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

/* H3 — Section labels */
h3 {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-secondary);
}

/* ---- Body Text ---- */
/* Cuerpo texto: Anek Tamil Regular 17px */
p {
  font-family: var(--font-primary);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

/* Cuerpo texto auxiliar: Anek Tamil Light 13px */
.text-aux {
  font-size: var(--text-small);
  font-weight: var(--weight-light);
  line-height: 1.7;
}

/* ---- Selection ---- */
::selection {
  background: var(--color-accent);
  color: var(--color-1);
}

/* ---- Utility: screen-reader only ---- */
.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;
}