/* GumPulse Design Tokens */
:root {
  /* Brand */
  --navy-deep: #0B1F4A;
  --navy-900: #0B1F4A;
  --navy-800: #142a5e;
  --navy-700: #1d3673;
  --navy-600: #2a4690;
  --pulse-cyan: #00C8F0;
  --cyan-600: #00a7c9;
  --cyan-400: #4ddcf5;
  --cyan-100: #d1f4fb;
  --cyan-50: #ecfaff;

  /* Neutrals — subtly cool */
  --ink-900: #0B1224;
  --ink-700: #2a3550;
  --ink-500: #5a6580;
  --ink-400: #8189a3;
  --ink-300: #b6bcce;
  --ink-200: #d7dbe5;
  --ink-100: #ebedf2;
  --ink-50: #f5f6fa;
  --paper: #fbfbfd;
  --white: #ffffff;

  /* Semantic */
  --success: #1f9d6a;
  --success-bg: #e6f6ee;
  --warn: #d68a2a;
  --warn-bg: #fbf1e1;
  --danger: #d24a4a;
  --danger-bg: #fbe9e9;

  /* Radii — controlled scale, no in-betweens */
  --r-tag: 4px;
  --r-card: 16px;
  --r-card-lg: 24px;
  --r-pill: 100px;

  /* Type */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Editorial noir — dark section background used across storefront */
  --noir: #0a1220;
  --noir-raised: #101b30;
  --hairline-dark: rgba(255,255,255,0.14);
  --hairline-light: rgba(11,31,74,0.14);

  /* Shadows — soft, navy-tinted */
  --shadow-sm: 0 1px 2px rgba(11, 31, 74, 0.06), 0 1px 3px rgba(11, 31, 74, 0.04);
  --shadow-md: 0 4px 14px rgba(11, 31, 74, 0.08), 0 2px 6px rgba(11, 31, 74, 0.04);
  --shadow-lg: 0 18px 40px rgba(11, 31, 74, 0.14), 0 6px 14px rgba(11, 31, 74, 0.08);
  --shadow-cyan: 0 8px 24px rgba(0, 200, 240, 0.28);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: var(--font-body); color: var(--ink-900); -webkit-font-smoothing: antialiased; }
body { background: var(--paper); }

.font-display { font-family: var(--font-display); letter-spacing: -0.025em; font-weight: 700; }
.font-serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
.font-mono { font-family: var(--font-mono); }

/* Editorial numbering, e.g. (00.03) */
.gp-num {
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-400);
  letter-spacing: 0.02em;
}
.gp-num.on-dark { color: rgba(255,255,255,0.4); }

/* Bordered pill nav — matches editorial reference */
.gp-pill-nav {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--hairline-light);
  border-radius: 100px;
  padding: 6px 6px 6px 18px;
}
.gp-pill-nav.on-dark { border-color: var(--hairline-dark); }

.gp-pill-btn {
  border-radius: 100px; padding: 8px 16px;
  font-size: 13px; font-weight: 600; color: inherit;
}

/* Outline button for use over photography */
.btn-outline-dark {
  background: rgba(10,18,32,0.35);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(6px);
}
.btn-outline-dark:hover { background: rgba(10,18,32,0.55); border-color: rgba(255,255,255,0.5); }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* Reusable photo placeholder */
.photo-placeholder {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(11,31,74,0.04) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, var(--ink-50), var(--ink-100));
  border: 1px solid var(--ink-200);
  border-radius: var(--r-card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--ink-500);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}
.photo-placeholder.dark {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, var(--navy-800), var(--navy-900));
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
}
.photo-placeholder::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: calc(var(--r-card) - 4px);
  border: 1px dashed rgba(11,31,74,0.12);
  pointer-events: none;
}
.photo-placeholder.dark::before { border-color: rgba(255,255,255,0.12); }
.photo-placeholder.noir {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, var(--noir-raised), var(--noir));
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
}
.photo-placeholder.noir::before { border-color: rgba(255,255,255,0.1); }
.photo-placeholder .label { position: relative; padding: 0 12px; max-width: 80%; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: var(--r-pill); font-weight: 600; font-size: 15px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; font-family: var(--font-body); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--pulse-cyan); color: var(--navy-deep); box-shadow: var(--shadow-cyan); }
.btn-primary:hover { background: var(--cyan-400); }
.btn-navy { background: var(--navy-deep); color: var(--white); }
.btn-navy:hover { background: var(--navy-800); }
.btn-ghost { background: transparent; color: var(--navy-deep); border: 1px solid var(--ink-200); }
.btn-ghost:hover { background: var(--ink-50); }

/* Cards */
.card { background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--r-card); }

/* Tags */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--r-tag); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.tag-cyan { background: var(--cyan-50); color: var(--cyan-600); }
.tag-navy { background: var(--ink-100); color: var(--navy-deep); }
.tag-success { background: var(--success-bg); color: var(--success); }
.tag-warn { background: var(--warn-bg); color: var(--warn); }
.tag-danger { background: var(--danger-bg); color: var(--danger); }

/* Scrollbar hide for nav rows */
.scroll-hide::-webkit-scrollbar { display: none; }
.scroll-hide { scrollbar-width: none; }

/* ---- Responsive helpers (customer site) ---- */
.gp-desktop-only { display: none !important; }
.gp-mobile-only { display: block; }
@media (min-width: 900px) {
  .gp-desktop-only { display: block !important; }
  .gp-mobile-only { display: none !important; }
}
img { max-width: 100%; display: block; }

/* ---- Cinematic motion ---- */
@keyframes gp-sweep {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes gp-pulse-line {
  0%, 100% { stroke-dashoffset: 0; }
  50% { stroke-dashoffset: -40; }
}
.gp-sweep-bg {
  background-size: 220% 220%;
  animation: gp-sweep 14s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .gp-sweep-bg { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ---- Scroll-scrubbed feature swap + cinematic ken-burns ---- */
@keyframes gpFadeSwap {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.gp-fade-swap { animation: gpFadeSwap .55s cubic-bezier(.16,1,.3,1); }

@keyframes gpKenBurns {
  0% { transform: scale(1) translate3d(0,0,0); }
  100% { transform: scale(1.08) translate3d(-1%, -1%, 0); }
}
.gp-kenburns { animation: gpKenBurns 16s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .gp-fade-swap, .gp-kenburns { animation: none !important; }
}