/*
  Hey Borton / Pulse - Color Tokens
  v1.0.0

  Import or paste into your root stylesheet:
    @import url('palette.css');
  Or copy the :root block directly.
*/

:root {
  /* Core */
  --coral:    #E26B57;  /* single accent */
  --peach:    #F2C8B1;  /* secondary warmth */
  --shell:    #FAF7F4;  /* canvas */
  --charcoal: #1F1F28;  /* body + primary */
  --slate:    #8A8A90;  /* metadata */

  /* Coral opacity variants for overlays */
  --coral-80: rgba(226, 107, 87, 0.80);
  --coral-60: rgba(226, 107, 87, 0.60);
  --coral-40: rgba(226, 107, 87, 0.40);
  --coral-20: rgba(226, 107, 87, 0.20);

  /* Charcoal opacity variants for body text at reduced emphasis */
  --charcoal-82: rgba(31, 31, 40, 0.82);
  --charcoal-65: rgba(31, 31, 40, 0.65);

  /* Semantic aliases */
  --bg-canvas:       var(--shell);
  --bg-dark:         var(--charcoal);
  --fg-body:         var(--charcoal-82);
  --fg-heading:      var(--charcoal);
  --fg-metadata:     var(--slate);
  --fg-emphasis:     var(--coral);
  --border-soft:     var(--peach);
  --accent:          var(--coral);
  --cta-bg:          var(--coral);
  --cta-fg:          var(--shell);
}

/* Dark mode campaign surfaces (ads on charcoal) */
[data-theme="dark"] {
  --bg-canvas: var(--charcoal);
  --fg-body: rgba(250, 247, 244, 0.82);
  --fg-heading: var(--shell);
  --fg-metadata: var(--slate);
}