/* ═══════════════════════════════════════════
   TOKENS — theme-invariant constants + light/dark
   scales + gradient-weave poles + inverted sections.
   Every other stylesheet consumes these variables.
   ═══════════════════════════════════════════ */

:root {
  /* accents (theme-invariant) */
  --accent: #6d5efc;        /* South Hustles iridescent violet-blue */
  --accent-soft: #a99bff;
  --accent-2: #ff5a7a;      /* holographic pink (hero blob) */
  /* University palette — the coloured course cards ("perder el
     miedo a los colores"): red / amber / green / blue tiles */
  --uni-red: #e8402c;
  --uni-amber: #f4c542;
  --uni-green: #2fb872;
  --uni-blue: #4a6cf0;
  --uni-ink: #111114;       /* text on coloured tiles */
  /* holographic gradient (hero blob / iridescent accents) */
  --holo: linear-gradient(135deg, #ff8ad4 0%, #c08bff 30%, #6d9bff 60%, #57e6ff 100%);

  /* type — South Hustles: heavy grotesk headlines + italic serif accents */
  --font-grotesk: 'Archivo', 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Archivo', 'Inter Tight', system-ui, sans-serif; /* big headlines are grotesk here, not serif */
  --font-serif: 'Instrument Serif', 'DM Serif Display', Georgia, serif; /* HUSTLES / SYSTEM / everything italics */
  --font-italic: 'Instrument Serif', Georgia, serif;
  /* Former terminal/mono voice, retired site-wide (Franco: "no quiero esa
     font terminal en ningún lado — cine/editorial mode"). The token name is
     kept so every existing label inherits the new voice in one place: a
     tracked grotesk that reads as an editorial caption, never a runbook. */
  --font-mono: 'Archivo', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Archivo', 'Inter Tight', ui-sans-serif, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* geometry */
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 28px;
  --maxw: 1180px;
  --maxw-wide: 1560px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html[data-theme='light'] {
  color-scheme: light;
  /* South Hustles neutral grey — matches the Webflow ~#e6e6e6 canvas,
     NOT pure white. Surfaces (cards, nav) go brighter than the page. */
  --bg-0: #e6e6e6;
  --bg-1: #ededed;
  --bg-2: #dcdcdc;
  --bg-glass: rgba(230, 230, 230, 0.72);
  --ink-0: #0d0d0f;
  --ink-1: #46464b;
  --ink-2: #77777d;
  --ink-3: #a9a9ad;
  --line: #cfcfcf;
  --line-soft: #dcdcdc;
  /* gradient weave poles: every section blends between these.
     Kept close so the page reads as one calm grey field with
     dark chapters punched in. */
  --pole-hi: #ececec;
  --pole-lo: #d8d8d8;
  --surface: #f4f4f4;      /* raised cards / nav pill */
  --surface-ink: #ffffff;  /* pure-white raised blocks (SOUTH HUSTLES card) */
  --shadow-card: 0 1px 2px rgba(13, 13, 15, 0.04), 0 16px 40px -24px rgba(13, 13, 15, 0.16);
  --shadow-lift: 0 2px 6px rgba(13, 13, 15, 0.08), 0 24px 60px -28px rgba(13, 13, 15, 0.24);
}

html[data-theme='dark'] {
  color-scheme: dark;
  /* Neutral grayscale only — R=G=B on every dark stop. The previous
     values leaned the blue channel 2-5pts above red/green on every dark
     tone site-wide, reading as a cyan/blue cast in every black (Franco:
     "sin cyan en la version darkmode"). */
  --bg-0: #0a0a0a;
  --bg-1: #121212;
  --bg-2: #1c1c1c;
  --bg-glass: rgba(15, 15, 15, 0.72);
  --ink-0: #f4f4f5;
  --ink-1: #b7b7bf;
  --ink-2: #82828c;
  --ink-3: #4a4a52;
  --line: #292929;
  --line-soft: #202020;
  --pole-hi: #1a1a1a;
  --pole-lo: #050505;
  --surface: #181818;
  --surface-ink: #1e1e1e;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 40px -24px rgba(0, 0, 0, 0.7);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.55), 0 24px 60px -28px rgba(0, 0, 0, 0.85);
}

/* ── gradient weave ──
   Sections alternate direction so adjacent edges share a stop
   and the page reads as one continuous white↔black wave. */
.section {
  position: relative;
  background: linear-gradient(180deg, var(--pole-hi), var(--pole-lo));
}
.section[data-grad='up'] {
  background: linear-gradient(0deg, var(--pole-hi), var(--pole-lo));
}

/* ── inverted sections (Books, Machines) ──
   Locally re-declare the scales so every child restyles itself.
   These are the literal black poles of the white↔black language. */
.section--inverted {
  --bg-0: #0c0c0c;
  --bg-1: #131313;
  --bg-2: #1c1c1c;
  --bg-glass: rgba(18, 18, 18, 0.72);
  --ink-0: #f4f4f5;
  --ink-1: #b9b9c1;
  --ink-2: #84848e;
  --ink-3: #4c4c55;
  --line: #282828;
  --line-soft: #202020;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 40px -24px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
  background: linear-gradient(180deg, #121212, #060606 55%, #121212);
}
html[data-theme='dark'] .section--inverted {
  background: linear-gradient(180deg, #0d0d0d, #030303 55%, #0d0d0d);
}

/* ── tinted section blocks (rhythm breaks between the
   white↔black gradient weave) ── */
.section--tint-violet {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--bg-0)), color-mix(in srgb, var(--accent) 16%, var(--bg-0)));
}
.section--tint-warm {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 8%, var(--bg-0)), color-mix(in srgb, var(--accent-2) 14%, var(--bg-0)));
}

/* background-only weave connectors — a section can enter from,
   or exit into, the near-black pole so adjacent chapters share a
   stop. Stops live inside the section padding; these utilities
   NEVER touch text color (that was the Colophon contrast bug). */
.section[data-grad='from-dark'] {
  background: linear-gradient(180deg, #0c0c0c 0%, var(--pole-hi) 13%, var(--pole-lo) 100%);
}
.section[data-grad='to-dark'] {
  background: linear-gradient(180deg, var(--pole-hi) 0%, var(--pole-lo) 82%, #0c0c0c 100%);
}
.section[data-grad='dark-both'] {
  background: linear-gradient(180deg, #0c0c0c 0%, var(--pole-hi) 14%, var(--pole-lo) 84%, #0c0c0c 100%);
}
/* violet bloom — radial accents pushing out of the corners of a
   dark chapter ("perder el miedo a los colores") */
.section--violet-bloom {
  background:
    radial-gradient(52% 44% at 8% 0%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%),
    radial-gradient(46% 40% at 100% 100%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 72%),
    linear-gradient(180deg, #0c0c0c, #131313 55%, #0c0c0c);
  color-scheme: dark;
}

/* white→gray→near-black transition for the closing
   chapters of the page. */
.section--gradient-bn {
  /* the light stretch stays inside the top padding, so the forced
     light text below is always sitting on near-black (contrast fix) */
  background: linear-gradient(180deg, var(--bg-0) 0%, #1a1a1a 12%, #0c0c0c 55%, #0c0c0c 100%);
}
html[data-theme='dark'] .section--gradient-bn {
  background: linear-gradient(180deg, var(--bg-0) 0%, #121212 12%, #000000 60%, #000000 100%);
}
.section--gradient-bn .eyebrow,
.section--gradient-bn h2,
.section--gradient-bn p:not(.lede) { color: #f4f4f5; }
.section--gradient-bn .lede { color: rgba(244, 244, 245, 0.72); }

/* ghost background words — large outline-only type sitting
   behind a section title. Purely decorative.
   Franco: pin them to the screen edges (not floating loose in the
   middle), push the parallax travel much harder, drop the opacity a
   touch more, and give them a more creative voice — the italic serif
   used for "creative studio" (same idea as the footer's mixed-weight
   "Create memorable experiences" headline). */
.bg-word {
  position: absolute;
  z-index: 0;
  top: 50%;
  translate: 0 -50%; /* vertical center only — horizontal is edge-anchored below */
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(90px, 22vw, 280px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink-0) 8%, transparent);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.bg-word--edge-l { left: -3%; }
.bg-word--edge-r { left: auto; right: -3%; }
.section-head, .repo-header, .glosario-header { position: relative; z-index: 1; }

/* hand-written margin annotations — mono notes pinned at an angle
   over section backgrounds (runbook-in-the-margins language) */
.bg-note {
  position: absolute;
  z-index: 1;
  max-width: 240px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  padding: 10px 14px;
  /* resting state: a hairline instead of the dashed rule, a touch more
     see-through, a barely-there parallel shadow for a glass-pane feel —
     the dashed "annotation" line only earns its keep on hover */
  border: 0.3px solid color-mix(in srgb, var(--ink-0) 28%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg-0) 58%, transparent);
  backdrop-filter: blur(3px);
  box-shadow: 1px 1px 0 0 color-mix(in srgb, var(--ink-0) 5%, transparent);
  transform: rotate(-2deg);
  pointer-events: auto;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  animation: bg-note-drift 8s ease-in-out infinite;
}
.bg-note:hover {
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--bg-0) 78%, transparent);
  box-shadow: none;
}
.bg-note b { color: var(--accent); font-weight: 500; }
.bg-note--right { transform: rotate(1.8deg); }
.bg-note--warm:hover { border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); }
.bg-note--warm b { color: var(--accent-2); }
@keyframes bg-note-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}
@media (prefers-reduced-motion: reduce) { .bg-note { animation: none; } }
@media (max-width: 900px) { .bg-note { display: none; } }

/* ── colored hairlines (the mid-section outline language) ── */
.hairline {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent) 55%, transparent),
    transparent
  );
}
.hairline--warm {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent-2) 55%, transparent),
    transparent
  );
}