/* ============================================================================
   Crypto Clarity AI — global premium redesign layer ("Assay")
   ----------------------------------------------------------------------------
   Concept: a precision financial instrument. "Assay" = testing precious metal
   for hidden impurity — the same job this product does for a crypto portfolio.
   A warm vault-black canvas, ONE confident gold signal used with restraint,
   fine hairline detailing, soft film grain, and monospace numerals for instant
   financial-instrument credibility. The opposite of generic neon-blue crypto
   sites: most of the page is calm monochrome, and gold appears only where it
   earns attention (CTAs, key emphasis, fine accents).

   Loaded last (via FUNNEL_SNIPPET, injected just before </head>) so it wins the
   cascade over the compiled Tailwind bundle and the homepage polish block on
   every page. Token overrides use :root:root for guaranteed specificity.
   ============================================================================ */

:root:root {
  /* Warm vault-black neutrals (a whisper of warmth reads more premium than cold blue). */
  --background: 36 12% 4%;
  --card: 36 10% 7%;
  --popover: 36 10% 6%;
  --border: 38 14% 16%;
  --input: 38 14% 16%;
  --muted: 36 10% 12%;
  --muted-foreground: 40 12% 64%;

  /* Single signal accent: refined warm gold. */
  --primary: 41 92% 60%;
  --primary-foreground: 36 40% 7%;
  --ring: 41 92% 60%;

  /* Restrained gold treatments (used sparingly). */
  --cc-gold: hsl(41 92% 60%);
  --cc-gold-soft: hsl(44 96% 70%);
  --cc-grad: linear-gradient(180deg, hsl(46 98% 72%) 0%, hsl(41 92% 58%) 100%);
  --cc-glow: hsla(41, 92%, 56%, .42);
  --cc-hair: hsla(40, 30%, 80%, .12);
}

/* ── Typography ──────────────────────────────────────────────────────────── */
body { font-feature-settings: "ss01", "cv01"; }
h1, h2, h3, .font-display {
  font-family: "Space Grotesk", Inter, system-ui, -apple-system, sans-serif;
  letter-spacing: -0.025em;
}
h1 { letter-spacing: -0.035em; line-height: 1.02; }

/* Monospace for labels / eyebrows / data — the fintech-terminal tell. */
.font-mono,
[class*="uppercase"][class*="tracking-wide"],
[class*="uppercase"][class*="tracking-wider"],
[class*="uppercase"][class*="tracking-widest"] {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em !important;
}

/* Headline emphasis: solid warm gold, not a rainbow. Restraint = premium. */
h1 .text-primary,
h2 .text-primary {
  background: var(--cc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Ambient canvas: one warm glow + fine film grain (every page has .min-h-screen) ── */
.min-h-screen { position: relative; z-index: 0; }
.min-h-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 680px at 78% -16%, hsla(41, 90%, 52%, .14), transparent 58%),
    radial-gradient(900px 620px at 8% 4%, hsla(36, 40%, 40%, .10), transparent 60%),
    radial-gradient(1400px 900px at 50% 122%, hsla(41, 80%, 46%, .06), transparent 60%);
  animation: cc-aurora 26s ease-in-out infinite alternate;
}
/* Soft film grain — reads expensive, almost subliminal. */
.min-h-screen::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes cc-aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .9; }
  100% { transform: translate3d(0, -1.5%, 0) scale(1.04); opacity: 1; }
}

/* ── Header: refined glass with a single gold hairline ───────────────────── */
header {
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  background: hsla(36, 14%, 4%, .68) !important;
  border-bottom: 1px solid var(--cc-hair);
  box-shadow: 0 1px 0 hsla(41, 92%, 60%, .06);
}

/* ── Cards: matte, fine border, whisper-thin top highlight, restrained lift ─ */
[class~="bg-card"] {
  background-color: hsla(36, 11%, 8%, .80) !important;
  background-image: linear-gradient(180deg, hsla(44, 60%, 88%, .04), hsla(44, 60%, 88%, 0) 40%);
  border-color: var(--cc-hair) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 hsla(44, 80%, 90%, .05), 0 26px 54px -34px hsla(36, 60%, 2%, .9);
  transition: transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s ease, border-color .24s ease;
}
[class~="bg-card"]:hover {
  transform: translateY(-3px);
  border-color: hsla(41, 92%, 60%, .26) !important;
  box-shadow: inset 0 1px 0 hsla(44, 80%, 90%, .07), 0 34px 64px -30px hsla(36, 70%, 2%, .95), 0 0 0 1px hsla(41, 92%, 60%, .07);
}

/* Soften any token-driven hairline borders globally. */
[class*="border-border/50"],
[class*="border-border/60"],
[class*="border-border/40"] {
  border-color: var(--cc-hair) !important;
}

/* ── Pill badges (hero eyebrow etc.): quiet gold, no glow spam ───────────── */
p[class*="bg-primary/5"][class*="rounded-full"],
span[class*="bg-primary/10"][class*="rounded-full"],
div[class*="bg-primary/10"][class*="rounded-full"] {
  background-image: linear-gradient(135deg, hsla(41, 92%, 58%, .12), hsla(41, 92%, 58%, .04));
  border-color: hsla(41, 92%, 62%, .30) !important;
  box-shadow: inset 0 1px 0 hsla(44, 80%, 90%, .06);
  backdrop-filter: blur(6px);
}

/* ── Primary CTA: solid gold, dark text, subtle sheen — looks expensive ──── */
a[class~="bg-primary"],
button[class~="bg-primary"],
[data-cc-checkout] {
  background-image: var(--cc-grad) !important;
  color: hsl(36 40% 7%) !important;
  font-weight: 600;
  border: 0;
  box-shadow: inset 0 1px 0 hsla(48, 100%, 92%, .55), 0 10px 30px -12px var(--cc-glow) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
a[class~="bg-primary"] *,
button[class~="bg-primary"] *,
[data-cc-checkout] * { color: hsl(36 40% 7%) !important; }
a[class~="bg-primary"]:hover,
button[class~="bg-primary"]:hover,
[data-cc-checkout]:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: inset 0 1px 0 hsla(48, 100%, 92%, .6), 0 18px 42px -12px var(--cc-glow) !important;
}

/* Secondary / outline buttons: calm glass with a thin gold edge. */
a[class~="border-primary"],
button[class~="border-primary"] {
  background: hsla(41, 92%, 58%, .05);
  border-color: hsla(41, 92%, 62%, .38) !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
a[class~="border-primary"]:hover,
button[class~="border-primary"]:hover {
  background: hsla(41, 92%, 58%, .11);
  border-color: hsla(41, 92%, 62%, .55) !important;
  transform: translateY(-1px);
}

/* ── Focus-visible accessibility ring ────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--cc-gold);
  outline-offset: 2px;
}

/* ── Premium scrollbar + selection ───────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: hsl(40 24% 30%) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: hsl(40 22% 26%);
  border-radius: 999px;
  border: 3px solid hsl(36 12% 4%);
}
*::-webkit-scrollbar-thumb:hover { background: hsl(41 60% 40%); }
::selection { background: hsla(41, 92%, 58%, .30); color: hsl(44 96% 92%); }

/* ── Respect reduced-motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .min-h-screen::before { animation: none; }
  [class~="bg-card"],
  a[class~="bg-primary"],
  button[class~="bg-primary"],
  [data-cc-checkout] { transition: none; }
}