/*
 * variables.css — Literacy Stations Brand Tokens
 * Extends / corrects the :root tokens in style.css
 * Font: Poppins everywhere (loaded via Elementor global settings)
 * ─────────────────────────────────────────────────────────────────
 */

:root {

  /* ── Rach Palette — primary brand, used for products & icons ── */
  --ls-rach-red:    #CF3A60;
  --ls-rach-orange: #FF914D;
  --ls-rach-yellow: #F9BF1A;
  --ls-rach-green:  #9DCB6C;
  --ls-rach-ltblue: #66A7DE;
  --ls-rach-dkblue: #467FF7;
  --ls-rach-purple: #AF5BD6;

  /* ── UI / System Colors ── */
  --ls-black:        #000000;
  --ls-white:        #FFFFFF;
  --ls-bg-page:      #F3F5F8;
  --ls-bg-light:     #F9FAFD;
  --ls-btn-blue:     #324A6D;
  --ls-btn-blue-hov: #263d5a;
  --ls-btn-red:      #CF3A60;
  --ls-btn-red-hov:  #b52e51;
  --ls-sale-red:     #CF3A60;
  --ls-gold-star:    #F99703;
  --ls-banner-yel:   #FFBF19;
  --ls-accent-blue:  #47629C;
  --ls-border:       #A4A4A4;
  --ls-border-light: #E0E4EA;
  --ls-text-body:    #000000;
  --ls-text-muted:   #6B7280;

  /* ── Overrides for existing ls- tokens ── */
  --ls-color-accent:      #CF3A60;
  --ls-color-accent-deep: #b52e51;
  --ls-color-border:      #E0E4EA;
  --ls-color-ink:         #1A1A2E;

  /* ── Spacing & Shape ── */
  --ls-radius-card: 10px;
  --ls-radius-btn:  8px;
  --ls-radius-pill: 999px;
  --ls-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.07);
  --ls-shadow-card-hov: 0 6px 24px rgba(0, 0, 0, 0.13);
  --ls-shadow-panel: 0 1px 4px rgba(0, 0, 0, 0.06);

  /* ── Typography ── */
  --ls-font:       'Poppins', sans-serif;
}