/* ============================================================
   Horsiq — Themes & interactive color
   Loaded LAST. Drives: Dark mode, Colorful mode, icon recoloring,
   theme control UI, smooth theme transitions.
   ============================================================ */

/* ============================================================
   1) ICON MASK SYSTEM
   Icons are <span> with --icon set inline. Rendered as a mask
   so they take ANY color (currentColor by default, --c in colorful).
   This is what makes icons themeable + colorful.
   ============================================================ */

.service-card__icon,
.svc-hero__icon {
  background-color: var(--icon-color, currentColor);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
  /* width/height/margin come from components.css & pages.css */
}

/* ============================================================
   2) DARK THEME
   Reverse colors — warm near-black bg, warm off-white text.
   Only color tokens are overridden; everything else follows
   because the whole site is built on these variables.
   ============================================================ */

[data-theme="dark"] {
  --color-paper:        #100E0B;  /* page bg — warm near-black */
  --color-paper-warm:   #181510;  /* slightly raised sections */
  --color-paper-cool:   #1E1A14;  /* card surfaces */
  --color-ink:          #F4EFE6;  /* primary text — warm off-white */
  --color-ink-soft:     #DAD3C6;  /* body text */
  --color-ink-muted:    #948C7E;  /* secondary text, captions */
  --color-ink-faint:    #423D34;  /* dividers, borders */

  /* CTA band & dark surfaces invert → become LIGHT, so they still pop */
  --color-dark:         #F4EFE6;
  --color-dark-paper:   #100E0B;

  --color-focus:        #F4EFE6;
}

/* Paper texture: multiply blend dies on black → switch to screen, fade */
[data-theme="dark"] body::before {
  mix-blend-mode: screen;
  opacity: 0.025;
}

/* Nav scrolled blur tints correctly via color-mix already.
   Selection auto-follows. Buttons auto-invert. */

/* ============================================================
   3) SMOOTH THEME TRANSITION
   Brief global transition only while switching (class toggled by JS).
   ============================================================ */

html.theme-anim,
html.theme-anim body,
html.theme-anim .nav,
html.theme-anim .section,
html.theme-anim .footer,
html.theme-anim .service-card,
html.theme-anim .svc-block,
html.theme-anim .cta-band,
html.theme-anim .btn,
html.theme-anim .why,
html.theme-anim .about-founder,
html.theme-anim .about-stack,
html.theme-anim .contact-next,
html.theme-anim .svc-stack__chip {
  transition: background-color 0.45s ease, color 0.45s ease,
              border-color 0.45s ease !important;
}

/* ============================================================
   4) COLORFUL MODE
   Built on the light paper base. JS assigns a random --c (and --ct
   for full-color surfaces) to each element on every "Colorful" click.
   Strategy: TINT large modules (readable), SATURATE accents & buttons.
   ============================================================ */

/* --- Tinted surfaces: pastel bg, ink text stays readable --- */
[data-colorful] .service-card,
[data-colorful] .svc-related a,
[data-colorful] .about-principles__item,
[data-colorful] .approach__step,
[data-colorful] .why,
[data-colorful] .about-founder,
[data-colorful] .about-stack,
[data-colorful] .contact-next,
[data-colorful] .manifesto,
[data-colorful] .combo-note {
  background-color: color-mix(in srgb, var(--c, #888) 16%, var(--color-paper));
  border-color: color-mix(in srgb, var(--c, #888) 45%, transparent);
}

/* --- Per-sector backgrounds (TEST) ---
   Each <section> + footer gets its own random tinted background.
   color-mix with --color-paper is theme-aware automatically:
   bright tints on the light theme, dark tints on the dark theme. */
[data-colorful] section,
[data-colorful] .footer {
  background-color: color-mix(in srgb, var(--c) 22%, var(--color-paper));
  transition: background-color 0.6s ease;
}

/* --- Full-color surfaces: saturated bg + auto-contrast text --- */
[data-colorful] .btn--primary,
[data-colorful] .cta-band,
[data-colorful] .svc-stack__chip,
[data-colorful] .about-founder__avatar {
  background-color: var(--c, var(--color-ink));
  color: var(--ct, #fff);
  border-color: transparent;
}
[data-colorful] .cta-band h2 { color: var(--ct, #fff); }
[data-colorful] .btn--primary .btn__arrow { color: var(--ct, #fff); }

/* --- Accents: saturated color on text/stroke --- */
[data-colorful] .home-hero__title,
[data-colorful] .svc-hero__title,
[data-colorful] .page-hero__title,
[data-colorful] .post-hero__title,
[data-colorful] .section-eyebrow__title,
[data-colorful] .manifesto__text,
[data-colorful] .combo-note__text,
[data-colorful] h2.svc-block__heading,
[data-colorful] .service-card__title,
[data-colorful] .editorial-list__title,
[data-colorful] .why__item-title,
[data-colorful] .approach__step-title,
[data-colorful] .about-principles__title,
[data-colorful] .svc-deliverables__title,
[data-colorful] .svc-process__title {
  color: var(--c, var(--color-ink));
}

/* numbers, labels, arrows, eyebrows */
[data-colorful] .section-eyebrow__num,
[data-colorful] .svc-block__label,
[data-colorful] .svc-deliverables__num,
[data-colorful] .editorial-list__num,
[data-colorful] .svc-process__step,
[data-colorful] .service-card__num,
[data-colorful] .home-hero__eyebrow,
[data-colorful] .page-hero__eyebrow,
[data-colorful] .svc-hero__crumbs,
[data-colorful] .caption,
[data-colorful] .service-card__arrow,
[data-colorful] .editorial-list__arrow {
  color: var(--c, var(--color-ink-muted));
}

/* FULL text colorize — every text element gets its own random color.
   Full-color surfaces (buttons, CTA, chips) keep their --ct contrast text
   via higher-specificity rules above, so they stay readable. */
[data-colorful] h1, [data-colorful] h2, [data-colorful] h3,
[data-colorful] h4, [data-colorful] h5, [data-colorful] h6,
[data-colorful] p, [data-colorful] li, [data-colorful] a,
[data-colorful] span, [data-colorful] strong, [data-colorful] em,
[data-colorful] blockquote, [data-colorful] summary,
[data-colorful] label, [data-colorful] dt, [data-colorful] dd,
[data-colorful] figcaption, [data-colorful] .nav__link,
[data-colorful] .lead, [data-colorful] .caption, [data-colorful] .muted {
  color: var(--c, inherit);
  transition: color 0.6s ease;
}

/* icons → take their own random color */
[data-colorful] .service-card__icon,
[data-colorful] .svc-hero__icon {
  background-color: var(--c, currentColor);
}

/* brand wordmarks → per-letter random (JS wraps letters in .ltr) */
[data-colorful] .footer__wordmark .ltr,
[data-colorful] .nav__brand .ltr {
  color: var(--c, currentColor);
}

/* Smooth morph on every re-mix (persistent while in colorful) */
[data-colorful] .service-card,
[data-colorful] .svc-related a,
[data-colorful] .about-principles__item,
[data-colorful] .approach__step,
[data-colorful] .why,
[data-colorful] .btn--primary,
[data-colorful] .cta-band,
[data-colorful] .svc-stack__chip,
[data-colorful] .about-founder__avatar,
[data-colorful] .service-card__icon,
[data-colorful] .svc-hero__icon,
[data-colorful] [class*="__title"],
[data-colorful] [class*="__num"],
[data-colorful] .ltr,
[data-colorful] .home-hero__title,
[data-colorful] .manifesto__text {
  transition: background-color 0.6s ease, color 0.6s ease,
              border-color 0.6s ease;
}

/* ============================================================
   5) THEME CONTROL UI  (injected into nav by horsiq.js)
   ============================================================ */

.theme-ctl {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.theme-ctl__mode {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-ink-faint);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-size: 16px;
  line-height: 1;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.theme-ctl__mode:hover {
  background-color: var(--color-ink);
  color: var(--color-paper);
}

.theme-ctl__colorful {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-ink-faint);
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.theme-ctl__colorful::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: conic-gradient(#E8453C, #FF851B, #F7B500, #2BB673,
              #00A6A6, #1B98E0, #7C3AED, #D6336C, #E8453C);
  flex-shrink: 0;
}
.theme-ctl__colorful:hover { transform: translateY(-1px); }
.theme-ctl[data-active="colorful"] .theme-ctl__colorful {
  border-color: transparent;
  color: #fff;
  background:
    linear-gradient(90deg,
      #E8453C, #FF851B, #F7B500, #2BB673,
      #00A6A6, #1B98E0, #7C3AED, #D6336C);
  background-size: 300% 100%;
  animation: clrFlow 6s linear infinite;
}
@keyframes clrFlow {
  to { background-position: 300% 0; }
}

/* Header layout: brand · (menu) · theme-ctl · burger.
   Control lives in the header bar (outside the menu) so it's always
   visible — including mobile, alongside the burger. */
.nav { gap: var(--space-5); }
.nav__brand { margin-right: auto; }
.nav > nav      { order: 2; }   /* the menu wrapper */
.theme-ctl      { order: 3; }
.nav__toggle    { order: 4; }

@media (max-width: 768px) {
  .theme-ctl { gap: var(--space-3); }
  /* tighten the colorful pill a touch on small screens */
  .theme-ctl__colorful { padding: 8px 13px; font-size: 13px; }
  .theme-ctl__mode { width: 36px; height: 36px; }
}

/* ============================================================
   6) NAV hide/show on scroll (driven by horsiq.js)
   ============================================================ */

.nav {
  transition: background-color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              padding var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.nav.nav--hidden { transform: translateY(-105%); }

@media (prefers-reduced-motion: reduce) {
  .nav.nav--hidden { transform: none; }
  html.theme-anim * { transition: none !important; }
}