:root {
  /* ==========================================================================
     COLOR MAPPING (Legacy hex codes -> New CSS variables)
     - #422C88 (Legacy Purple Main)   -> #1003A3 (--color-purple-main)
     - #5E4C98 (Legacy Purple 2)      -> #4035B5 (--color-purple-primary-2)
     - #7C6DAC (Legacy Purple 3)      -> #7068C8 (--color-purple-primary-3)
     - #9E93C3 (Legacy Purple 4)      -> #9F9ADA (--color-purple-primary-4)
     - #C8C2DE (Legacy Purple 5)      -> #CFCDED (--color-purple-primary-5)
     - #9684AD (Legacy Purple Soft)   -> #645BC3 (--color-purple-soft)
     - #44167e (Legacy Purple Medium) -> #0D0285 (--color-purple-medium)
     - #CA3CA4 (Legacy Pink Main)     -> #1003A3 (--color-pink-main)
     - #C5299B (Legacy Pink Deep)     -> #1003A3 (--color-pink-deep)
     ========================================================================== */

  --color-purple-main: #1003A3;
  --color-blue-100: #1003A3;
  --color-purple-main-rgb: 16, 3, 163;
  --color-purple-primary-2: #4035B5;
  --color-purple-primary-3: #7068C8;
  --color-purple-primary-4: #9F9ADA;
  --color-purple-primary-5: #CFCDED;
  --color-blue-60: #6F68C8;
  --color-blue-40: #8F8ADA;
  --color-blue-20: #CFCDED;
  --color-blue-tab: #4d44ba;
  --color-purple-dark: #330072;
  --color-purple-medium: #0D0285;
  --color-purple-deep: #1003A3;
  --color-purple-light: #614586;
  --color-purple-pale: #e4dbf0;
  --color-purple-soft: #645BC3;
  --color-purple-lavender: #8c71ae;
  --color-purple-muted: #504187;
  --color-purple-border: #8e7ec1;
  --color-purple-rgba: rgba(155, 135, 185, 0.9);
  
  --color-pink-main: #1003A3;
  --color-pink-main-alpha: #1003A3e5;
  --color-pink-deep: #1003A3;
  --color-pink-light: #1003A3;
  --color-pink-soft: #ea868f;

  --color-blue-main: #0f71bb;

  --color-white: #ffffff;
  --color-white-pink: #F2F2F2;
  --color-black: #000000;
  --color-dark: #111111;
  --color-gray-dark: #555555;
  --color-gray-medium: #5c5c5c;
  --color-grey-31: #505050;
  --color-gray-bg: #f5f5f5;
  --color-gray-soft: #f2f2f2;
  --color-gray-pale: #f0f0f0;
  --color-gray-lavender: #F6FAFF;
  --color-programmes-detail-bg: #F6FAFF;
  --color-programmes-detail-bg-rgba: rgba(246, 250, 255, 0.88);
  --color-gray-mist: #C5D7FF;
  --color-gray-light: #eeeeee;
  --color-gray-line: #dddddd;
  --color-gray-border: #dadada;
  --color-gray-hsl: hsl(0deg 0% 93.33%);
  --color-gray-overlay: rgba(112, 112, 112, 0.3);

  --color-lavender-rgba: rgba(228, 225, 233, 0.88);
  --color-beige: #FCF3E5;
  --color-cream-100: #F8E1BF;
  --color-transparent: transparent;
  --color-transparent-white: rgba(255, 255, 255, 0);


  /* Backgrounds */
  --bg-app: var(--color-gray-lavender);
  --bg-surface: var(--color-white);
  --bg-secondary: var(--color-gray-bg);
  --bg-subtle: var(--color-gray-soft);
  --bg-pale: var(--color-gray-pale);
  --bg-brand: var(--color-purple-main);
  --bg-brand-dark: var(--color-purple-dark);
  --bg-accent: var(--color-pink-main);

  /* Typography */
  --text-primary: var(--color-dark);
  --text-secondary: var(--color-gray-medium);
  --text-muted: var(--color-gray-dark);
  --text-brand: var(--color-purple-main);
  --text-brand-dark: var(--color-purple-deep);
  --text-brand-medium: var(--color-purple-medium);
  --text-accent: var(--color-pink-main);
  --text-accent-deep: var(--color-pink-deep);
  --text-inverse: var(--color-white);

  /* Borders & Components */
  --border-brand: var(--color-purple-dark);
  --border-accent: var(--color-pink-main);
  --border-subtle: var(--color-gray-mist);

  --btn-primary-bg: var(--color-pink-deep);
  --btn-primary-text: var(--color-white);
}