/* =============================================================================
   VARIABLES.CSS — Design Tokens & CSS Custom Properties
   Vacalion Landing Page
   
   All colors, spacing, typography, and shared values live here.
   Edit this single file to rebrand or adjust the theme globally.
   ============================================================================= */

:root {
  /* ── Brand Colors (Purple/Violet primary, Teal accent) ── */
  --purple:        #7C3AED;
  --purple-dark:   #6D28D9;
  --purple-light:  #A78BFA;
  --purple-glow:   rgba(124, 58, 237, 0.08);
  --violet:        #8B5CF6;
  --teal:          #0FD3AC;
  --teal-dark:     #0BB494;
  --teal-glow:     rgba(15, 211, 172, 0.08);
  --blue:          #0499C3;
  --blue-dark:     #037A9C;

  /* ── Gradients (xMoney-style) ── */
  --gradient-brand:    linear-gradient(135deg, #7C3AED, #A78BFA);
  --gradient-hero:     linear-gradient(160deg, rgba(124, 58, 237, 0.06) 0%, rgba(167, 139, 250, 0.04) 40%, rgba(15, 211, 172, 0.03) 70%, transparent 100%);
  --gradient-section:  linear-gradient(180deg, rgba(124, 58, 237, 0.03) 0%, rgba(139, 92, 246, 0.02) 50%, transparent 100%);
  --gradient-accent:   linear-gradient(135deg, #7C3AED, #0FD3AC);
  --gradient-cta:      linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(15, 211, 172, 0.04));

  /* ── Semantic Colors ── */
  --gold:          #FFB84D;
  --danger:        #FF6B6B;
  --success:       #4FE3BF;

  /* ── Background ── */
  --bg-primary:    #FFFFFF;
  --bg-section:    #F9F7FF;
  --bg-card:       #FFFFFF;
  --bg-card-hover: #F5F3FF;
  --bg-elevated:   #F3F0FF;

  /* ── Borders ── */
  --border:        rgba(124, 58, 237, 0.08);
  --border-strong:  rgba(124, 58, 237, 0.16);

  /* ── Text ── */
  --text-primary:   #1A0A2E;
  --text-secondary: #5C5A7D;
  --text-muted:     #9794B8;

  /* ── Layout ── */
  --max-width:  1200px;
  --nav-height: 72px;
}