/* ==========================================================
   COLORS.CSS — BUZZ Agency Design System Color Tokens
   ========================================================== */

:root {
  /* ── Brand Primaries ── */
  --black:            #000000;
  --white:            #ffffff;
  --pink-deep:        #721e4b;   /* Deep burgundy-pink */
  --pink-mid:         #9a316b;   /* Mid rose */
  --pink-light:       #f2d3d6;   /* Blush / light pink */

  /* ── Surfaces ── */
  --surface-base:       #ffffff;
  --surface-elevated:   #fdf7f8;   /* Very slight blush tint */
  --surface-floating:   #faeef0;   /* Soft pink float */
  --surface-card:       #f9f2f4;
  --surface-dark:       #0a0507;   /* Near-black with warm tint */
  --surface-overlay:    rgba(114, 30, 75, 0.08);

  /* ── Text ── */
  --text-primary:       #000000;
  --text-secondary:     rgba(0, 0, 0, 0.65);
  --text-muted:         rgba(0, 0, 0, 0.58);   /* ≥4.5:1 on white (WCAG AA) */
  --text-on-dark:       #ffffff;
  --text-on-dark-sub:   rgba(255, 255, 255, 0.75);

  /* ── Borders ── */
  --border-subtle:      rgba(114, 30, 75, 0.07);
  --border-default:     rgba(114, 30, 75, 0.14);
  --border-strong:      rgba(114, 30, 75, 0.28);
  --border-dark:        rgba(255, 255, 255, 0.12);

  /* ── Gradients ── */
  --gradient-brand:     linear-gradient(135deg, var(--pink-deep), var(--pink-mid));
  --gradient-blush:     linear-gradient(135deg, var(--pink-mid), var(--pink-light));
  --gradient-full:      linear-gradient(135deg, var(--pink-deep), var(--pink-mid), var(--pink-light));
  --gradient-hero-fade: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.55) 100%);
  --gradient-up-fade:   linear-gradient(to top, var(--surface-base) 0%, transparent 100%);

  /* ── Brand Glows (for shadows / highlights) ── */
  --glow-pink-deep:   rgba(114, 30, 75, 0.28);
  --glow-pink-mid:    rgba(154, 49, 107, 0.22);
  --glow-blush:       rgba(242, 211, 214, 0.5);

  /* ── Accent Transparencies ── */
  --pink-deep-05:   rgba(114, 30, 75, 0.05);
  --pink-deep-10:   rgba(114, 30, 75, 0.10);
  --pink-deep-20:   rgba(114, 30, 75, 0.20);
  --pink-mid-10:    rgba(154, 49, 107, 0.10);
  --pink-mid-20:    rgba(154, 49, 107, 0.20);
  --pink-light-30:  rgba(242, 211, 214, 0.30);
  --pink-light-50:  rgba(242, 211, 214, 0.50);

  /* ── Dark Section Overrides (Nav, Loader, Footer) ── */
  --surface-nav-scrolled:  rgba(255, 255, 255, 0.88);
  --surface-nav-dark:      rgba(0, 0, 0, 0.85);
}