:root {
    /* ---------------------------------------------------
     * BASE COLORS (Brand Primitives)
     * --------------------------------------------------- */
    --color-brand-purple: #2d0a4b;      /* Deep purple, main brand */
    --color-brand-pink: #ff6b7a;        /* Vibrant pink accent */
    --color-brand-orange: #ffb36b;      /* Soft orange accent */
    --color-brand-red: #FE625E;         /* CTA button red */
    --color-brand-light-pink: #ffe6ea;  /* Light pink background/accent */
    --color-brand-light-purple: #f3f0fa;/* Light purple background */
    --color-brand-white: #ffffff;       /* Pure white */
    --color-brand-black: #181818;       /* Near black for text */
  
    /* ---------------------------------------------------
     * NEUTRALS (Grays & Neutral Tones)
     * --------------------------------------------------- */
    --color-neutral-100: #f8f8fa;   /* Lightest gray, backgrounds */
    --color-neutral-200: #ececf0;   /* Card backgrounds, subtle borders */
    --color-neutral-300: #d6d6e0;   /* Borders, dividers */
    --color-neutral-400: #b0b0c3;   /* Muted text */
    --color-neutral-500: #7a7a8c;   /* Subtle text */
    --color-neutral-600: #44445a;   /* Default text */
    --color-neutral-900: #181818;   /* Headings, strong text */
  
    /* ---------------------------------------------------
     * SEMANTIC COLORS
     * --------------------------------------------------- */
    --color-success: #3ecf8e;       /* Success green */
    --color-warning: #ffb36b;       /* Warning orange (matches accent) */
    --color-error: #ff4d5a;         /* Error red (matches CTA) */
  
    /* ---------------------------------------------------
     * TEXT COLORS
     * --------------------------------------------------- */
    --color-text-default: var(--color-neutral-600);
    --color-text-subtle: var(--color-neutral-500);
    --color-text-muted: var(--color-neutral-400);
    --color-text-inverted: var(--color-brand-white);
    --color-text-brand: var(--color-brand-purple);
  
    /* ---------------------------------------------------
     * BACKGROUND COLORS
     * --------------------------------------------------- */
    --color-bg-default: var(--color-brand-white);
    --color-bg-muted: var(--color-neutral-100);
    --color-bg-inverted: var(--color-brand-purple);
    --color-bg-brand: var(--color-brand-light-purple);
  
    /* ---------------------------------------------------
     * BORDER COLORS
     * --------------------------------------------------- */
    --color-border: var(--color-neutral-300);
    --color-border-default: var(--color-neutral-300);
    --color-border-strong: var(--color-brand-purple);
    --color-border-muted: var(--color-neutral-200);
    --color-border-light: var(--color-neutral-200);
  
    /* ---------------------------------------------------
     * FONT FAMILIES
     * --------------------------------------------------- */
    --font-family-sans: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    --font-family-serif: 'Georgia', serif;
  
    /* ---------------------------------------------------
     * FONT SIZES (px)
     * --------------------------------------------------- */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 28px;
    --font-size-xxl: 40px;
  
    /* ---------------------------------------------------
     * LINE HEIGHTS
     * --------------------------------------------------- */
    --line-height-tight: 1.1;
    --line-height-normal: 1.5;
    --line-height-loose: 1.75;
  
    /* ---------------------------------------------------
     * LETTER SPACING
     * --------------------------------------------------- */
    --letter-spacing-tight: -0.01em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
  
    /* ---------------------------------------------------
     * SPACING SCALE (px)
     * --------------------------------------------------- */
    --space-xxs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-xxl: 80px;
  
    /* ---------------------------------------------------
     * BORDER RADII
     * --------------------------------------------------- */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 32px;
    --radius-pill: 999px;
  
    /* ---------------------------------------------------
     * BORDER WIDTHS
     * --------------------------------------------------- */
    --border-width-thin: 1px;
    --border-width-thick: 2px;
  
    /* ---------------------------------------------------
     * BOX SHADOWS
     * --------------------------------------------------- */
    --shadow-xs: 0 1px 2px 0 rgba(44, 10, 75, 0.04);
    --shadow-sm: 0 2px 8px 0 rgba(44, 10, 75, 0.08);
    --shadow-md: 0 4px 16px 0 rgba(44, 10, 75, 0.12);
  
    /* ---------------------------------------------------
     * BUTTONS
     * --------------------------------------------------- */
    /* Primary Button */
    --btn-primary-bg: var(--color-brand-red);
    --btn-primary-text: var(--color-brand-white);
    --btn-primary-hover-bg: #e63b4a;
    --btn-primary-border: var(--color-brand-red);
  
    /* Secondary Button */
    --btn-secondary-bg: var(--color-brand-white);
    --btn-secondary-text: var(--color-brand-purple);
    --btn-secondary-hover-bg: var(--color-brand-light-pink);
    --btn-secondary-border: var(--color-brand-purple);
  
    --btn-radius: var(--radius-pill);
    --btn-padding-y: var(--space-xs);
    --btn-padding-x: var(--space-lg);
    --btn-font-size: var(--font-size-md);
    --btn-font-weight: 600;
  
    /* Icon Button */
    --icon-size-sm: 16px;
    --icon-size-md: 24px;
    --icon-size-lg: 32px;
  
    /* ---------------------------------------------------
     * LINK COLORS
     * --------------------------------------------------- */
    --link-primary: var(--color-brand-red);
    --link-primary-hover: #e63b4a;
    --link-secondary: var(--color-brand-purple);
    --link-secondary-hover: var(--color-brand-pink);
  
    /* ---------------------------------------------------
     * CONTAINER WIDTHS
     * --------------------------------------------------- */
    --container-xs: 480px;
    --container-sm: 720px;
    --container-md: 960px;
    --container-lg: 1200px;
    --container-xl: 1440px;
  
    /* ---------------------------------------------------
     * BREAKPOINTS
     * --------------------------------------------------- */

    --breakpoint-sm: 700px;
    --breakpoint-md: 1024px;
    --breakpoint-lg: 1200px;
  
    /* ---------------------------------------------------
     * CARD COMPONENT TOKENS
     * --------------------------------------------------- */
    --card-bg: var(--color-brand-white);
    --card-bg-alt: var(--color-brand-purple);
    --card-radius: var(--radius-md);
    --card-padding: var(--space-lg);
    --card-shadow: var(--shadow-sm);
    --card-border: var(--color-border-default);
    --card-title-color: var(--color-brand-purple);
    --card-text-color: var(--color-text-default);
  
    /* ---------------------------------------------------
     * FORM ELEMENTS
     * --------------------------------------------------- */
    --input-bg: var(--color-brand-white);
    --input-border: var(--color-border-default);
    --input-radius: var(--radius-sm);
    --input-padding-y: var(--space-xs);
    --input-padding-x: var(--space-sm);
    --input-placeholder: var(--color-neutral-400);
    --input-focus-border: var(--color-brand-purple);
  
    /* ---------------------------------------------------
     * MISCELLANEOUS
     * --------------------------------------------------- */
    --transition-fast: 0.15s cubic-bezier(0.4,0,0.2,1);
    --transition-normal: 0.3s cubic-bezier(0.4,0,0.2,1);
  }