/* ============================================================
   XERKONIX — shared design tokens & cross-page normalizations
   Loaded LAST in <head> so selectors override inline <style>.
   ============================================================ */

/* ── 1. Design tokens (brand canon) ────────────────────────── */
:root {
  --xk-identity:        #C0A062;
  --xk-identity-deep:   #8B7337;
  --xk-identity-light:  #D4B878;
  --xk-ink:             #1A1A1A;
  --xk-text:            #2C2C2C;
  --xk-text-body:       #5A5A5A;
  --xk-surface:         #FBFAF6;
  --xk-surface-sub:     #F5F2E8;
  --xk-border:          #E5E0D4;
  --xk-canvas:          #FFFFFF;

  --xk-nav-h:           68px;
  --xk-logo-h-desktop:  48px;
  --xk-logo-h-mobile:   32px;

  --xk-radius-sm:       6px;
  --xk-radius-md:       10px;
  --xk-radius-lg:       16px;
}

/* ── 2. Logo size normalization ────────────────────────────── */
.nav-logo img,
.brand-link img,
.brand img,
header .logo-box img { height: var(--xk-logo-h-desktop) !important; width: auto !important; }

/* Weave: logo is wrapped in a sized box; cap its container too */
.logo-box {
  width: auto !important;
  height: calc(var(--xk-logo-h-desktop) + 12px) !important;
  min-width: 0 !important;
}
.logo-box img { object-fit: contain; }

@media (max-width: 820px) {
  .nav-logo img,
  .brand-link img,
  .brand img,
  header .logo-box img { height: var(--xk-logo-h-mobile) !important; }
  .logo-box { height: calc(var(--xk-logo-h-mobile) + 10px) !important; }
}

/* ── 3. Reduced-motion: disable decorative motion across site ─ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-glow, .hero-threads { display: none !important; }
}

/* ── 4a. Shared team-card color accents ─────────────────────
   Used by home (/index.html) and AX landing (/ax/index.html).
   Keep accent tokens here so both pages render identical colors. */
.team-card.c-leadership { --team-ac: rgba(192, 160, 98, 0.92); }
.team-card.c-sales      { --team-ac: rgba(59, 67, 79, 0.92); }
.team-card.c-business   { --team-ac: rgba(110, 127, 163, 0.92); }
.team-card.c-data       { --team-ac: rgba(91, 140, 115, 0.92); }
.team-card.c-platform   { --team-ac: rgba(74, 124, 168, 0.92); }
.team-card.c-ax         { --team-ac: rgba(138, 158, 58, 0.92); }

/* ── 4. Partner-logo marquee polish ─────────────────────────── */
.partners-wall .pr-track { will-change: transform; }
.partners-wall, .partners-wall * { user-select: none; }
.partners-wall .pr-row[aria-hidden] img { pointer-events: none; }

/* ── 5. Minimal brand header for pages that were text-only
   (news / contact). Class-scoped, only applies where used. ── */
.xk-mini-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--xk-border);
  font-family: 'IBM Plex Sans KR', 'Pretendard', -apple-system, sans-serif;
}
.xk-mini-nav .xk-mini-logo { display: inline-flex; align-items: center; }
.xk-mini-nav .xk-mini-logo img { height: var(--xk-logo-h-desktop); width: auto; display: block; }
.xk-mini-nav .xk-mini-links { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.xk-mini-nav .xk-mini-links a {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--xk-text); text-decoration: none; font-weight: 600;
  position: relative; padding-bottom: 3px;
  transition: color .2s ease;
}
.xk-mini-nav .xk-mini-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--xk-identity);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.xk-mini-nav .xk-mini-links a:hover { color: var(--xk-identity-deep); }
.xk-mini-nav .xk-mini-links a:hover::after,
.xk-mini-nav .xk-mini-links a[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 820px) {
  .xk-mini-nav { padding: 10px 18px; }
  .xk-mini-nav .xk-mini-logo img { height: var(--xk-logo-h-mobile); }
  .xk-mini-nav .xk-mini-links { gap: 14px; }
  .xk-mini-nav .xk-mini-links a { font-size: 11px; }
}

/* ── 6. Minimal footer for pages that were missing one ───────── */
.xk-mini-footer {
  padding: 48px 32px; margin-top: 80px;
  background: var(--xk-surface);
  border-top: 1px solid var(--xk-border);
  color: var(--xk-text-body);
  font-family: 'IBM Plex Sans KR', 'Pretendard', -apple-system, sans-serif;
  font-size: 13px; line-height: 1.7;
}
.xk-mini-footer .xk-foot-inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.xk-mini-footer .xk-foot-links { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.xk-mini-footer a { color: var(--xk-text); text-decoration: none; }
.xk-mini-footer a:hover { color: var(--xk-identity-deep); }
.xk-mini-footer .xk-foot-copy { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .05em; }
@media (max-width: 680px) {
  .xk-mini-footer { padding: 32px 18px; }
  .xk-mini-footer .xk-foot-inner { flex-direction: column; align-items: flex-start; }
}
