/* ============================================================
   YB Base — Phase 0 hardening pass
   Single source of truth for a11y + motion + reset overrides.
   Loaded on every page BEFORE Tailwind utilities so utilities win.
   ============================================================ */

/* --- 1. Restore native cursor (kill the global cursor:none) -------
   The old rule `* { cursor: none !important }` broke touch users,
   screen-magnifier users, form inputs, and made the cursor invisible
   on any device whose JS hadn't initialized yet. We now scope the
   custom cursor to fine-pointer devices only, which the cursor JS
   itself should also gate on. */
@media (hover: none), (pointer: coarse) {
  html, body, * {
    cursor: auto !important;
  }
  .yb-cursor, .cursor-dot, .cursor-ring, #cursor, #custom-cursor {
    display: none !important;
  }
}

/* Inputs and textareas always show the real caret/I-beam, even on desktop */
input, textarea, select, [contenteditable="true"] {
  cursor: text !important;
}
button, a, [role="button"], [role="link"], summary {
  cursor: pointer;
}

/* --- 2. Focus-visible ring (was missing entirely) ----------------- */
:root {
  --yb-focus-ring: 0 0 0 2px #0B0816, 0 0 0 4px #AB66D5;
  --yb-focus-ring-light: 0 0 0 2px #F4EBFA, 0 0 0 4px #6B2C8C;
}
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--yb-focus-ring);
  border-radius: 8px;
  transition: box-shadow 120ms ease;
}
html.light :focus-visible {
  box-shadow: var(--yb-focus-ring-light);
}
/* Specifically opt-in for inputs without crushing their own border-radius */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  box-shadow: var(--yb-focus-ring);
}

/* --- 3. Skip-to-content link -------------------------------------- */
.yb-skip-link {
  position: absolute;
  top: -64px;
  inset-inline-start: 16px;
  z-index: 9999;
  background: #6B2C8C;
  color: #F4EBFA;
  padding: 10px 18px;
  border-radius: 10px;
  font: 500 15px/1 'IBM Plex Sans Arabic', system-ui, sans-serif;
  text-decoration: none;
  transition: top 180ms cubic-bezier(.2,.7,.1,1);
}
.yb-skip-link:focus,
.yb-skip-link:focus-visible {
  top: 16px;
  box-shadow: var(--yb-focus-ring);
}

/* --- 4. prefers-reduced-motion safety net ------------------------- *
   Hard cap on durations + disable scroll-snapping animations.
   JS-level GSAP also checks this, but CSS gives a robust fallback. */
@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;
  }
  /* Kill known marquee / pulse / glitch classes if present */
  .marquee, .pulse-glow, .glitch, .stars, .aurora-glow, [class*="float-"] {
    animation: none !important;
  }
}

/* --- 5. Minimum touch targets on coarse pointers ------------------ */
@media (pointer: coarse) {
  a, button, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* --- 6. Mute the worst low-contrast micro-copy -------------------- *
   The audit flagged text-mist/30..40 failing 1.4.3 (~1.8:1).
   Bump anything that uses those tokens to mist-500 (≥4.5:1). */
.text-mist\/30, .text-mist\/40 {
  color: #8E8A9C !important; /* mist-500 — passes AA on void-black */
}

/* --- 7. Light Spotlight section (Phase 3 vibrancy) ----------------
   Apply class="light-spotlight" to any <section> to convert it into
   a cream relief band that interrupts the dark rhythm. Same content,
   same structure, opposite surface — used for credentials, outcomes,
   philosophy, manifesto-style sections.
   Used on: case-study Outcome, course Outcomes, about Credentials,
   homepage Philosophy (inline-styled there).
   The class flips text + accent + child surfaces consistently. */
.light-spotlight {
  background: #F4EBFA !important;
  border-top: 1px solid rgba(107, 44, 140, 0.32);
  border-bottom: 1px solid rgba(107, 44, 140, 0.32);
  color: #0A0612;
}
/* Headings + body text flip to dark on cream */
.light-spotlight h1,
.light-spotlight h2,
.light-spotlight h3,
.light-spotlight h4 { color: #0A0612 !important; }
.light-spotlight p,
.light-spotlight li,
.light-spotlight span { color: inherit; }
/* Mist-tinted utility classes invert to dark void */
.light-spotlight .text-mist,
.light-spotlight .text-mist\/95,
.light-spotlight .text-mist\/90,
.light-spotlight .text-mist\/85 { color: #0A0612 !important; }
.light-spotlight .text-mist\/80,
.light-spotlight .text-mist\/75,
.light-spotlight .text-mist\/70,
.light-spotlight .text-mist\/65 { color: rgba(10, 6, 18, 0.72) !important; }
.light-spotlight .text-mist\/60,
.light-spotlight .text-mist\/55,
.light-spotlight .text-mist\/50,
.light-spotlight .text-mist\/45 { color: rgba(10, 6, 18, 0.55) !important; }
/* Aurora gradient text becomes solid aurora-500 (ceremony budget intact) */
.light-spotlight .text-gradient-aurora { color: #6B2C8C !important; }
.light-spotlight .text-aurora-300 { color: #6B2C8C !important; }
.light-spotlight .text-aurora-200 { color: #411A55 !important; }
/* Section eyebrow (sec-num) stays caps but in aurora-700 */
.light-spotlight .sec-num { color: #411A55 !important; }
/* Cards inside light-spotlight become off-cream with aurora border */
.light-spotlight .cs-card,
.light-spotlight figure.cs-card,
.light-spotlight article {
  background: #FAF7FE !important;
  border: 1px solid rgba(107, 44, 140, 0.18) !important;
}
/* Explicit dark figure cards (PLACEHOLDER testimonial) stay dark for
   narrative contrast — opt-out via .keep-dark on the element. Needs
   higher specificity than `.light-spotlight figure.cs-card` above. */
.light-spotlight figure.keep-dark,
.light-spotlight .cs-card.keep-dark,
.light-spotlight article.keep-dark,
.light-spotlight .keep-dark {
  background: #16091D !important;
  border: 1px solid rgba(244,235,250,0.08) !important;
  color: #F4EBFA !important;
}
.light-spotlight .keep-dark *,
.light-spotlight figure.keep-dark *,
.light-spotlight .cs-card.keep-dark * { color: inherit !important; }
.light-spotlight .keep-dark .text-aurora-300,
.light-spotlight .keep-dark .text-aurora-200 { color: #AB66D5 !important; }
.light-spotlight .keep-dark .text-mist\/55 { color: rgba(244,235,250,0.55) !important; }

/* --- 8. Chapter mark — between major sections (aesthetic) -----------
   Editorial section divider used between major content sections.
   HTML pattern:
     <div class="chapter-mark" aria-hidden="true">
       <span class="chapter-mark-ornament">CH·02 · WORK</span>
     </div>
   Replaces flat horizontal lines with a punctuated typographic rhythm. */
.chapter-mark {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 56px 16px 32px;
  pointer-events: none;
}
.chapter-mark::before, .chapter-mark::after {
  content: ''; flex: 0 0 56px; height: 1px;
  background: linear-gradient(to right, transparent, rgba(199,152,227,0.4), transparent);
}
.chapter-mark-ornament {
  color: rgba(199,152,227,0.6);
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase;
  font-weight: 500; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
}
.chapter-mark-ornament::before {
  content: '✦'; font-size: 13px; opacity: 0.85;
  letter-spacing: 0;
}
/* On cream Light Spotlight backgrounds — flip to darker accents */
html.light .chapter-mark::before,
html.light .chapter-mark::after,
.light-spotlight .chapter-mark::before,
.light-spotlight .chapter-mark::after {
  background: linear-gradient(to right, transparent, rgba(107,44,140,0.45), transparent);
}
html.light .chapter-mark-ornament,
.light-spotlight .chapter-mark-ornament { color: rgba(107,44,140,0.7); }

/* Tabular figures for any element flagged as a numeric counter */
[data-counter] { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }