/* ═══════════════════════════════════════════════════════════
   CRAVANI — Color Tokens
   Premium dark cinematic palette. Single red accent over
   near-black surfaces. The original codebase named the accent
   "gold"; it is in fact a vivid signal red (#E5302A). Legacy
   --color-gold-* aliases are kept so older markup keeps working.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Backgrounds (page → deeper sections) ───────────────── */
  --color-bg:           #070709;   /* page base, near-black     */
  --color-bg-2:         #0d0d10;   /* alternating section       */
  --color-bg-3:         #111116;   /* deepest section / footer  */

  /* ── Surfaces (cards, panels) ───────────────────────────── */
  --color-surface:      #14141a;   /* default card              */
  --color-surface-2:    #1a1a22;   /* raised / hover card       */

  /* ── Borders (hairlines on dark) ────────────────────────── */
  --color-border:       rgba(255,255,255,0.06);
  --color-border-light: rgba(255,255,255,0.12);

  /* ── Accent — signal red ────────────────────────────────── */
  --color-accent:       #e5302a;   /* primary brand red         */
  --color-accent-light: #ff4433;   /* hover / glow              */
  --color-accent-dim:   rgba(229,48,42,0.14); /* tint fill      */
  --color-accent-rgb:   229, 48, 42;          /* for rgba()     */

  /* ── Neutrals (white → grays) ───────────────────────────── */
  --color-white:        #ffffff;
  --color-gray-100:     #f5f5f5;
  --color-gray-300:     #c4c4c4;
  --color-gray-400:     #9a9a9a;
  --color-gray-500:     #6b6b6b;
  --color-gray-600:     #464646;

  /* ── Text ───────────────────────────────────────────────── */
  --color-text:         #e8e8e8;   /* body text                 */
  --color-text-muted:   #8a8a96;   /* secondary / descriptions  */
  --color-text-dim:     #565660;   /* tertiary / captions       */

  /* ── Utility ────────────────────────────────────────────── */
  --color-whatsapp:     #25d366;   /* WhatsApp CTA only         */

  /* ── Semantic aliases ───────────────────────────────────── */
  --surface-page:       var(--color-bg);
  --surface-card:       var(--color-surface);
  --surface-card-hover: var(--color-surface-2);
  --text-heading:       var(--color-white);
  --text-body:          var(--color-text);
  --text-secondary:     var(--color-text-muted);
  --text-caption:       var(--color-text-dim);
  --accent:             var(--color-accent);
  --accent-hover:       var(--color-accent-light);
  --border-hairline:    var(--color-border);
  --border-strong:      var(--color-border-light);

  /* ── Legacy aliases (original "gold" naming) ────────────── */
  --color-gold:         var(--color-accent);
  --color-gold-light:   var(--color-accent-light);
  --color-gold-dim:     var(--color-accent-dim);
}