/* ============================================================
   PORTAL ALMA — Design Tokens
   Brand Colors from official palette PDF
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --purple:        #8254CE;   /* Principal */
  --purple-light:  #AE91ED;   /* Secundario 1 */
  --gold:          #CE9C52;   /* Secundario 2 */
  --dark:          #333333;
  --white:         #FFFFFF;

  /* ── Extended Palette (derived from brand) ── */
  --purple-deep:   #4A2A8A;
  --purple-hero:   #1B0840;   /* Hero backgrounds — deep purple, NOT black */
  --purple-mid:    #6B3DB5;
  --purple-pale:   #EEE8FB;
  --purple-ghost:  #F7F4FD;
  --purple-mist:   #F2EDF9;
  --gold-light:    #E5BB7A;
  --gold-pale:     #FBF5E8;
  --gold-glow:     rgba(206,156,82,.18);
  --cream:         #FEFCF8;

  /* ── Typography ── */
  --font-display:  'Great Vibes', cursive;
  --font-serif:    'Cormorant Garamond', serif;
  --font-sans:     'Nunito', sans-serif;

  /* ── Spacing ── */
  --space-xs:  .4rem;
  --space-sm:  .8rem;
  --space-md:  1.6rem;
  --space-lg:  3.2rem;
  --space-xl:  6rem;
  --space-2xl: 9rem;

  /* ── Radius ── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   28px;
  --radius-pill: 100px;
  --radius-circle: 50%;

  /* ── Shadows ── */
  --shadow-card:    0 4px 24px rgba(130,84,206,.10);
  --shadow-hover:   0 16px 48px rgba(130,84,206,.20);
  --shadow-gold:    0 8px 32px rgba(206,156,82,.25);
  --shadow-purple:  0 12px 40px rgba(130,84,206,.30);

  /* ── Transitions ── */
  --ease-smooth: cubic-bezier(.4,0,.2,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --t-fast:   .18s;
  --t-mid:    .32s;
  --t-slow:   .55s;

  /* ── Z-index ── */
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
}