/* =========================================================
   ChrysoKit, design tokens and shell polish
   ---------------------------------------------------------
   Loads AFTER light-theme.css / dark-theme.css so the few
   refinements here win, and BEFORE enhancements.css so page
   level rules can still override.

   Deliberately additive. The existing warm palette is kept
   as-is (its #D4A373 gold is already the same family as
   chrysofi's accent); this file adds the things ChrysoKit
   was missing rather than restyling what already works:

     1. A heading font token, so display type gets a real
        700/800 axis (Inter's self-hosted axis stops at 600).
     2. Icon box reservation, so the page does not shift when
        lucide swaps <i> for <svg>.
     3. A sliding nav underline and active state.
     4. Typographic polish tuned for reading comfort.
   ========================================================= */

:root {
  /* Headings and display numbers. Inter stays on body copy. */
  --font-head: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Motion, matched to chrysofi's feel */
  --ck-transition: .25s ease;
  --ck-transition-slow: .45s ease;

  /* Reserved icon box, keeps layout stable before hydration */
  --ck-icon: 1.05em;
}

/* ---------------------------------------------------------
   1. Typography
   Headings move to Plus Jakarta Sans. Slightly tighter
   tracking at display sizes, looser line-height at reading
   sizes, which is where the eye actually needs the room.
   --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.logo, .logo-mark, .logo-text,
.result-big, .timer-display,
.stat-card .stat-value,
.error-page .code {
  font-family: var(--font-head);
  font-optical-sizing: auto;
}

h1, h2 { letter-spacing: -0.02em; }
h3, h4 { letter-spacing: -0.01em; }

/* Body copy: a touch more leading and a hair more size for
   comfort, without changing the layout grid. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Long-form paragraphs get a comfortable measure. Applies to
   article bodies only so tool UIs keep their dense layout. */
.post-body p,
.article-body p,
.prose p {
  line-height: 1.75;
  max-width: 68ch;
}

/* Tabular figures wherever numbers are compared vertically,
   so digits line up instead of jittering. */
.result-big, .timer-display, .stat-card .stat-value,
.total-row, td, th {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------
   2. Icon placeholder box
   lucide REPLACES <i data-lucide> with an <svg class="lucide">
   rather than nesting inside it. So:
     - sizing the <i> only affects the pre-hydration moment,
       which is what we want for layout stability;
     - there is never an `i > svg`, so that selector is dead;
     - sizing `svg.lucide` at 100% is actively harmful. It made
       every icon expand to the width of its container (giant
       book/chevron/magnifier glyphs across the site), because
       this file loads after styles.css and so overrode the
       real per-component icon sizes with 100%.
   Icon dimensions are left entirely to the component CSS and
   to lucide's own width/height attributes.
   --------------------------------------------------------- */
i[data-lucide] {
  display: inline-block;
  width: var(--ck-icon);
  height: var(--ck-icon);
  vertical-align: -0.135em;
  flex: none;
}

/* ---------------------------------------------------------
   3. Navigation: active state + sliding underline
   chrysofi's header marks the current section; ChrysoKit's
   nav had no active affordance at all.
   --------------------------------------------------------- */
.main-nav { position: relative; }

.main-nav a {
  position: relative;
  transition: color var(--ck-transition);
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--ck-transition);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.main-nav a[aria-current="page"] {
  color: var(--primary-darker);
  font-weight: 600;
}

/* ---------------------------------------------------------
   4. Focus visibility
   A single consistent focus ring. Keyboard users currently
   get the browser default, which disappears against the
   warm background in several places.
   --------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary-darker);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------
   5. Animated gold wordmark
   chrysofi's header carries an animated gold CHRYSOFI mark.
   This is the same idea built small and for ChrysoKit's
   existing markup, so no HTML had to change on 112 pages:
   a gold gradient clipped to the letterforms with a slow
   highlight travelling across it, plus a soft sheen sweeping
   the square "C" chip.

   Guarded by @supports: where background-clip:text is not
   available the wordmark simply keeps its normal colour
   rather than going invisible.
   --------------------------------------------------------- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .logo-text {
    background-image: linear-gradient(
      100deg,
      var(--primary-darker) 0%,
      var(--primary) 28%,
      #F5E4C3 46%,
      var(--primary) 64%,
      var(--primary-darker) 100%
    );
    background-size: 250% 100%;
    background-position: 0% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: ck-wordmark 9s ease-in-out infinite;
  }

  /* The nested <span> around "Kit" inherits the clip, so it
     must not re-declare a colour or it punches a hole in the
     gradient. */
  .logo-text > span {
    color: inherit;
    -webkit-text-fill-color: inherit;
    background: none;
  }
}

@keyframes ck-wordmark {
  0%   { background-position:   0% 0; }
  50%  { background-position: 100% 0; }
100%  { background-position:   0% 0; }
}

/* Square "C" chip: keep the solid gold tile, add a sheen that
   crosses it on hover and a gentle lift. */
.logo-mark {
  position: relative;
  overflow: hidden;
  transition: transform var(--ck-transition), box-shadow var(--ck-transition);
}

.logo-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, .55) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  transition: transform var(--ck-transition-slow);
  pointer-events: none;
}

.logo:hover .logo-mark {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.logo:hover .logo-mark::after { transform: translateX(120%); }

/* ---------------------------------------------------------
   6. Motion preference
   Everything above degrades to no movement when the visitor
   asks for reduced motion.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}