/* ============================================================================
   CCE — Global refinements
   Loaded on every page. These rules are intentionally UN-layered so they take
   precedence over the Tailwind @layer (theme/base/components) blocks defined
   inline in each HTML file, letting us upgrade the whole site from one place.
   ============================================================================ */

html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.002em;
}

/* Refreshed brand tokens (richer, warmer gold; deeper, less flat surface). */
:root {
  --primary-color: #D9B65A;     /* warm refined gold */
  --gold-bright:   #ECD588;     /* highlight gold */
  --gold-deep:     #B8902F;     /* deep gold for gradients */
  --secondary-color:#0B1220;
  --muted-color:   #9AA6BE;
  --surface-color: #060810;     /* near-black with a hint of blue */
  --surface-muted: #0E1525;
  --border-color:  rgba(148,163,184,0.16);
  --radius-sm: 12px;
  --radius-md: 18px;
  --container: 1140px;
}

/* Soft ambient vignette behind everything so the black isn't dead-flat. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(217,182,90,0.10), transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, rgba(70,110,190,0.07), transparent 55%),
    radial-gradient(1200px 900px at 50% 120%, rgba(217,182,90,0.05), transparent 60%);
}

/* ---- Display typography: editorial serif for headings ---- */
body h1, body h2, body h3,
body .section-title {
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
body h1 { letter-spacing: -0.022em; }

/* Brand wordmark + small UI titles stay in the grotesk for legibility. */
body [data-name="brand-title"],
body [data-name="footer-brand-title"] {
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.01em;
}

p, li, span, a, button, input, textarea, select, label { text-wrap: pretty; }

/* ---- Kicker / eyebrow ---- */
.kicker {
  color: var(--gold-bright);
  letter-spacing: 0.18em;
  font-size: 0.7rem;
}

/* ---- Buttons ---- */
.btn {
  border-radius: var(--radius-sm);
  transition: transform .18s ease, box-shadow .22s ease, background .22s ease, opacity .2s ease, border-color .2s ease;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.btn > span { white-space: nowrap; }
.btn-primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--primary-color) 55%, var(--gold-deep));
  color: #1a1306;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 24px rgba(184,144,47,0.22), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(184,144,47,0.30), inset 0 1px 0 rgba(255,255,255,0.4); opacity: 1; }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { border-color: rgba(217,182,90,0.4); background: rgba(255,255,255,0.06); transform: translateY(-1px); }

/* ---- Cards ---- */
.card {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.025);
  transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}

/* Gold-forward glass (drops the heavy blue tint of the original). */
.glass {
  background:
    radial-gradient(1200px 520px at 18% -12%, rgba(217,182,90,0.14), rgba(217,182,90,0)),
    radial-gradient(900px 460px at 102% 0%, rgba(217,182,90,0.06), rgba(217,182,90,0)),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)) !important;
}

/* ---- Chips ---- */
.chip {
  border-radius: 999px;
  border: 1px solid rgba(217,182,90,0.22);
  background: rgba(217,182,90,0.06);
  letter-spacing: 0.01em;
  gap: 0.5rem;
  line-height: 1.35;
}
.chip > [class*="icon-"] { flex: none; }

/* ---- Inputs ---- */
.input, .textarea, select.input {
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border-color);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.input:hover, .textarea:hover { border-color: rgba(217,182,90,0.3); }
.input:focus, .textarea:focus {
  border-color: rgba(217,182,90,0.6);
  box-shadow: 0 0 0 4px rgba(217,182,90,0.14);
  background: rgba(255,255,255,0.04);
}

/* ---- Gold divider ---- */
.gold-divider {
  background: linear-gradient(90deg, rgba(217,182,90,0), rgba(217,182,90,0.45), rgba(217,182,90,0)) !important;
}

/* ---- Links, selection, scrollbar ---- */
a { text-decoration-thickness: 2px; text-underline-offset: 3px; }
::selection { background: rgba(217,182,90,0.26); color: #fff; }

* { scrollbar-width: thin; scrollbar-color: rgba(217,182,90,0.35) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(217,182,90,0.28); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(217,182,90,0.45); background-clip: padding-box; }