/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */

:root {
  /* ── Brand Palette ── */
  --primary:    #7C3AED;
  --dark-p:     #4C1D95;
  --mid-p:      #9333EA;
  --light-p:    #7C3AED;
  --pale-p:     #4C1D95;
  --deep-black: #0A0A0A;
  --white:      #FFFFFF;

  /* ── UI Surface Colors (Light Mode) ── */
  --bg:       #F5F3FF;
  --card-bg:  #FFFFFF;
  --card2:    #F0EBFF;
  --border:   rgba(124, 58, 237, 0.2);
  --text:     #1E0A3C;
  --muted:    #6D4A9C;
  --shadow:   rgba(124, 58, 237, 0.18);

  /* ── Semantic Aliases ── */
  --cream:  #F5F3FF;
  --blush:  #EDE9FE;
  --coral:  #9333EA;
  --berry:  #7C3AED;
  --mint:   #7C3AED;
  --gold:   #DDD6FE;

  /* ── Typography ── */
  --font-family: 'Tajawal', sans-serif;

  /* ── Spacing ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 44px;

  /* ── Border Radius ── */
  --radius-sm:  12px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-pill: 40px;
}