/* =========================================================================
   ConversionClub — Color tokens
   Dark-first, cinematic. Never pure black. The brand gradient is reserved
   for one headline word, the primary CTA, and light pulses — never large
   blocks. See readme.md → VISUAL FOUNDATIONS.
   ========================================================================= */

:root {
  /* ---- Core brand palette (exact spec values) ---- */
  --cc-bg-base:         #0F121B; /* page floor            */
  --cc-bg-center:       #1A202F; /* top radial center     */
  --cc-surface:         #212838; /* cards / raised panels */
  --cc-border:          #2E3648; /* 1px hairline          */
  --cc-text-primary:    #F4F6FB; /* headings / high emph  */
  --cc-text-secondary:  #9BA3B7; /* body / muted          */
  --cc-accent-primary:  #4F7CFF; /* electric blue         */
  --cc-accent-secondary:#9B6BFF; /* violet                */

  /* ---- Derived surfaces (for elevation & interaction) ---- */
  --cc-bg-sunken:       #0B0E15; /* below the floor (wells, code) */
  --cc-surface-2:       #262E41; /* hover / nested surface        */
  --cc-surface-3:       #2C3549; /* active / selected surface     */
  --cc-border-strong:   #3B455C; /* focus rings, dividers on hover */

  /* ---- Accent ramps (hover / press / soft fills) ---- */
  --cc-accent-primary-hover:   #6B90FF;
  --cc-accent-primary-press:   #3E68E6;
  --cc-accent-secondary-hover: #B085FF;
  --cc-accent-soft:   rgba(79,124,255,0.14);  /* tinted chips, selections */
  --cc-accent-soft-2: rgba(155,107,255,0.14);

  /* ---- Text ramp ---- */
  --cc-text-tertiary:  #6B7385; /* captions, meta         */
  --cc-text-on-accent: #FFFFFF; /* text over gradient CTA */
  --cc-text-disabled:  #565E70;

  /* ---- Light-surface tokens (black-logo / light contexts) ---- */
  --cc-light-surface:  #F4F6FB;
  --cc-light-ink:      #0F121B;

  /* ---- White alpha ladder (hairlines, overlays, inner highlights) ---- */
  --cc-white-04: rgba(244,246,251,0.04);
  --cc-white-06: rgba(244,246,251,0.06);
  --cc-white-08: rgba(244,246,251,0.08);
  --cc-white-12: rgba(244,246,251,0.12);
  --cc-white-20: rgba(244,246,251,0.20);

  /* ---- Functional / status (intentional addition — see readme) ---- */
  --cc-success: #34D399;
  --cc-warning: #F5B049;
  --cc-danger:  #F76B6B;
  --cc-info:    var(--cc-accent-primary);

  /* =====================================================================
     Semantic aliases — prefer these in components & pages
     ===================================================================== */
  --bg:             var(--cc-bg-base);
  --bg-elevated:    var(--cc-bg-center);
  --surface-card:   var(--cc-surface);
  --surface-hover:  var(--cc-surface-2);
  --surface-active: var(--cc-surface-3);
  --border-subtle:  var(--cc-border);
  --border-hover:   var(--cc-border-strong);

  --text-heading:   var(--cc-text-primary);
  --text-body:      var(--cc-text-secondary);
  --text-muted:     var(--cc-text-tertiary);
  --text-on-accent: var(--cc-text-on-accent);

  --accent:         var(--cc-accent-primary);
  --accent-2:       var(--cc-accent-secondary);
  --accent-hover:   var(--cc-accent-primary-hover);
  --focus-ring:     rgba(79,124,255,0.55);
}