/* ============================================================
   ORCHESTRA PROMO AGENCY — SHARED BRAND SYSTEM
   Single source of truth for all 6 launch-kit artifacts.
   ============================================================ */

:root {
  /* Primary palette — Deep blue family */
  --midnight: #0B1E3F;       /* deepest blue, hero backgrounds, headers */
  --navy: #1B3A6B;           /* secondary blue, accents */
  --royal: #2C5AA0;          /* interactive blue, hover states */

  /* Accent — Warm gold */
  --gold: #C9A961;           /* premium accent, CTAs, dividers */
  --gold-soft: #E2C98A;      /* hover/glow */
  --gold-deep: #A88840;      /* pressed states */

  /* Neutrals */
  --ivory: #F5F1E8;          /* primary background, warm off-white */
  --pearl: #FBFAF6;          /* card surfaces */
  --graphite: #2A2A2A;       /* body text */
  --slate: #5A5F6B;          /* secondary text */
  --line: #E5DFD0;           /* dividers on ivory */

  /* Semantic */
  --bg: var(--ivory);
  --surface: var(--pearl);
  --text: var(--graphite);
  --text-muted: var(--slate);
  --accent: var(--gold);
  --primary: var(--midnight);

  /* Typography */
  --font-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Spacing scale */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;

  /* Radii & shadows */
  --r-sm: 4px; --r-md: 10px; --r-lg: 18px; --r-xl: 28px;
  --shadow-sm: 0 2px 8px rgba(11, 30, 63, 0.06);
  --shadow-md: 0 8px 24px rgba(11, 30, 63, 0.10);
  --shadow-lg: 0 20px 50px rgba(11, 30, 63, 0.15);
  --shadow-gold: 0 8px 28px rgba(201, 169, 97, 0.28);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 600ms;

  /* ============ SILK CONSTELLATION TAPESTRY ============
     Shared subtle background pattern across all kit pages.
     Light variant for ivory/pearl backgrounds, dark for navy backgrounds.
     Pages can apply with: background-image: var(--tapestry-light/dark);
     ============================================================ */
  --tapestry-light:
    radial-gradient(circle at 18% 24%, rgba(11, 30, 63, 0.10) 1.6px, transparent 1.8px),
    radial-gradient(circle at 72% 68%, rgba(201, 169, 97, 0.13) 1.4px, transparent 1.6px),
    repeating-linear-gradient(45deg, transparent 0 36px, rgba(11, 30, 63, 0.025) 36px 37px),
    repeating-linear-gradient(-45deg, transparent 0 36px, rgba(201, 169, 97, 0.022) 36px 37px);
  --tapestry-light-size: 96px 96px, 120px 120px, auto, auto;
  --tapestry-dark:
    radial-gradient(circle at 22% 28%, rgba(201, 169, 97, 0.10) 1.5px, transparent 1.7px),
    radial-gradient(circle at 78% 64%, rgba(255, 255, 255, 0.06) 1.2px, transparent 1.4px),
    repeating-linear-gradient(45deg, transparent 0 40px, rgba(201, 169, 97, 0.030) 40px 41px),
    repeating-linear-gradient(-45deg, transparent 0 40px, rgba(255, 255, 255, 0.018) 40px 41px);
  --tapestry-dark-size: 110px 110px, 130px 130px, auto, auto;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--tapestry-light);
  background-size: var(--tapestry-light-size);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--primary);
  line-height: 1.15;
  margin: 0 0 var(--s-4);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 var(--s-4); }
a { color: var(--royal); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--gold-deep); }

/* ---------- Layout primitives ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--s-5); }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 var(--s-5); }

.section { padding: var(--s-9) 0; }
.section-tight { padding: var(--s-7) 0; }

/* ---------- Brand wordmark (logo placeholder) ---------- */
.wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--primary);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.wordmark::before {
  content: "";
  display: inline-block;
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--midnight), var(--royal));
  border-radius: 50%;
  position: relative;
  box-shadow: inset 0 0 0 2px var(--gold);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: none;
  transition: all var(--dur) var(--ease);
  text-decoration: none;
}
.btn-primary {
  background: var(--midnight);
  color: var(--ivory);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover {
  background: var(--navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: var(--ivory);
}
.btn-gold {
  background: var(--gold);
  color: var(--midnight);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover {
  background: var(--gold-soft);
  transform: translateY(-2px);
  color: var(--midnight);
}
.btn-ghost {
  background: transparent;
  color: var(--midnight);
  border: 1.5px solid var(--midnight);
}
.btn-ghost:hover { background: var(--midnight); color: var(--ivory); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ---------- Pills & tags ---------- */
.pill {
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  background: rgba(201, 169, 97, 0.15);
  color: var(--gold-deep);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Section eyebrow ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--s-3);
  display: inline-block;
}

/* ---------- Gold divider ---------- */
.divider-gold {
  width: 60px; height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin: var(--s-5) 0;
}

/* ---------- KPI / stat block ---------- */
.stat-value {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--midnight);
  line-height: 1;
}
.stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: var(--s-2);
}

/* ---------- Animations ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.fade-up { animation: fadeUp var(--dur-slow) var(--ease) both; }
.fade-up-1 { animation-delay: 80ms; }
.fade-up-2 { animation-delay: 160ms; }
.fade-up-3 { animation-delay: 240ms; }
.fade-up-4 { animation-delay: 320ms; }
.fade-up-5 { animation-delay: 400ms; }

/* ---------- Hero pattern (subtle) ---------- */
.hero-dark {
  background-color: var(--midnight);
  background-image:
    var(--tapestry-dark),
    radial-gradient(ellipse at top right, rgba(201, 169, 97, 0.12), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(44, 90, 160, 0.25), transparent 55%),
    linear-gradient(135deg, var(--midnight), #060f24);
  background-size: var(--tapestry-dark-size), auto, auto, auto;
  color: var(--ivory);
}
.hero-dark h1, .hero-dark h2 { color: var(--ivory); }
.hero-dark .eyebrow { color: var(--gold-soft); }

/* ---------- Print / PDF tweaks ---------- */
@media print {
  body { background: white; }
  .card, .section { box-shadow: none; page-break-inside: avoid; }
  .no-print { display: none !important; }
}