/* Coastal Key Empire v3 — Canonical design tokens (SSOT)
   Navy #0B1629 · Gold #C5A46E · Playfair Display + Space Grotesk
   Import on every surface: PM site, store, CEO console, dashboards */

:root {
  --ck-navy: #0B1629;
  --ck-deep-navy: #06101F;
  --ck-card: #132238;
  --ck-gold: #C5A46E;
  --ck-gold-bright: #D4AF37;
  --ck-sand: #E8E4D9;
  --ck-sand-muted: #8B9BB0;
  --ck-border: rgba(197, 164, 110, 0.22);
  --ck-success: #22c55e;
  --ck-warning: #f59e0b;
  --ck-danger: #ef4444;

  --ck-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --ck-font-sans: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --ck-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --ck-radius: 8px;
  --ck-radius-lg: 16px;
  --ck-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.45);
  --ck-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Legacy aliases — unify drifted stacks */
  --color-navy: var(--ck-navy);
  --color-gold: var(--ck-gold);
  --navy: var(--ck-navy);
  --gold: var(--ck-gold);
}

.ck-empire-body {
  font-family: var(--ck-font-sans);
  background: var(--ck-navy);
  color: var(--ck-sand);
}

.ck-display {
  font-family: var(--ck-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ck-promo-inlay {
  width: 100%;
}

.ck-promo-bar {
  background: linear-gradient(90deg, var(--ck-navy) 0%, var(--ck-card) 50%, var(--ck-navy) 100%);
  padding: 11px 16px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--ck-sand);
}

.ck-promo-bar strong {
  color: var(--ck-gold);
}

.ck-promo-bar a {
  color: var(--ck-sand);
  margin-left: 8px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ck-promo-divider {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ck-gold) 20%,
    var(--ck-gold-bright) 50%,
    var(--ck-gold) 80%,
    transparent 100%
  );
}

.ck-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  font-size: 0.82rem;
  letter-spacing: 0.3px;
  background: var(--ck-deep-navy);
  color: var(--ck-sand);
  border-bottom: 1px solid var(--ck-border);
}

.ck-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--ck-gold);
  color: var(--ck-navy);
  font-weight: 600;
  text-decoration: none;
  transition: var(--ck-transition);
}

.ck-btn-gold:hover {
  background: var(--ck-gold-bright);
  transform: translateY(-1px);
}

.ck-card {
  background: var(--ck-card);
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  box-shadow: var(--ck-shadow);
  padding: 1.25rem;
}