/**
 * global.css — Raneen Design System CSS Custom Properties
 * Import this before any component stylesheets.
 */

body {
  margin: 0;
  line-height: normal;
  font-family: var(--font-poppins);
}

/* ============================================================
   CSS Custom Properties (Design Tokens)
   ============================================================ */
:root {

  /* ----------------------------------------------------------
     Brand / Semantic Colors
     ---------------------------------------------------------- */

  /* Core palette */
  --white: #ffffff;
  --black: #000000;

  /* Primary Blue — main CTA / interactive colour */
  --primary:              #146bfb;   /* primary_blue-6  */

  /* Primary Purple — secondary brand colour */
  --secondary:            #090441;   /* primary_purple-6 */

  /* Secondary Purple — tertiary accent */
  --dark:                 #28043f;   /* secondary_purple-6 */

  /* Secondary Blue — info / highlight */
  --info:                 #16c9f9;   /* secondary_blue-6 */

  /* Semantic states */
  --success:              #0eb118;
  --warning:              #eaa018;
  --danger:               #ee0f13;
  --danger-dark:          #a9181a;

  /* Light / background tints for semantic states */
  --success-light:        #ebffed;
  --warning-light:        #fff5e2;
  --danger-light:         #ffe8e8;

  /* ----------------------------------------------------------
     Foundation — Black / Neutral Scale
     ---------------------------------------------------------- */
  --foundation-black-1:   #e6e6e6;
  --foundation-black-2:   #c2c2c2;
  --foundation-black-3:   #919191;
  --foundation-black-4:   #5e5e5e;
  --foundation-black-5:   #2e2e2e;
  --foundation-black-6:   #000000;

  /* Alias used in HTML */
  --Foundation-Black-black-10: #000000;

  /* ----------------------------------------------------------
     Foundation — Primary Blue Scale
     ---------------------------------------------------------- */
  --primary-blue-1:       #e8f0ff;
  --primary-blue-2:       #c7dbfe;
  --primary-blue-3:       #9abffd;
  --primary-blue-4:       #6ba2fc;
  --primary-blue-5:       #3e86fc;
  --primary-blue-6:       #146bfb;  /* base / --primary */
  --primary-blue-7:       #115bd5;
  --primary-blue-8:       #0e4cb2;
  --primary-blue-9:       #0b3d8f;
  --primary-blue-10:      #093071;

  /* Alias used in HTML */
  --Foundation-Primary-Blue-primary-blue-6: #146bfb;

  /* ----------------------------------------------------------
     Foundation — Primary Purple Scale
     ---------------------------------------------------------- */
  --primary-purple-1:     #e6e6ec;
  --primary-purple-2:     #c4c3d1;
  --primary-purple-3:     #9593ad;
  --primary-purple-4:     #646187;
  --primary-purple-5:     #353163;
  --primary-purple-6:     #090441;  /* base / --secondary */
  --primary-purple-7:     #080337;
  --primary-purple-8:     #06032e;
  --primary-purple-9:     #050225;
  --primary-purple-10:    #04021d;

  /* Alias used in HTML */
  --Foundation-Primary-Purple-primary-purple-6: #090441;

  /* ----------------------------------------------------------
     Foundation — Secondary Purple Scale
     ---------------------------------------------------------- */
  --secondary-purple-1:   #eae6ec;
  --secondary-purple-2:   #cbc3d1;
  --secondary-purple-3:   #a393ac;
  --secondary-purple-4:   #786186;
  --secondary-purple-5:   #4f3162;
  --secondary-purple-6:   #28043f;  /* base / --dark */
  --secondary-purple-7:   #220336;
  --secondary-purple-8:   #1c032d;
  --secondary-purple-9:   #170224;
  --secondary-purple-10:  #12021c;

  /* Alias used in HTML */
  --Foundation-Secondary-Purple-secondary-purple-6: #28043f;

  /* ----------------------------------------------------------
     Foundation — Secondary Blue Scale
     ---------------------------------------------------------- */
  --secondary-blue-1:     #e8fafe;
  --secondary-blue-2:     #c7f2fe;
  --secondary-blue-3:     #9be8fc;
  --secondary-blue-4:     #6cddfb;
  --secondary-blue-5:     #40d3fa;
  --secondary-blue-6:     #16c9f9;  /* base / --info */
  --secondary-blue-7:     #13abd4;
  --secondary-blue-8:     #108fb1;
  --secondary-blue-9:     #0d738e;
  --secondary-blue-10:    #0a5a70;

  /* Aliases used in HTML */
  --Foundation-Secondary-Blue-secondary-blue-6: #16c9f9;
  --Foundation-Secondary-Blue-secondary-blue-8: #108fb1;

  /* ----------------------------------------------------------
     Misc Named Colors (from CSS)
     ---------------------------------------------------------- */
  /* Semi-transparent overlay / panel background */
  --color-gray:                 rgba(0, 0, 0, 0.05);

  --color-azure:                #e8fafe;
  --color-cornflowerblue:       #6ba2fc;
  --color-darkslateblue-100:    #4f3162;
  --color-darkslateblue-200:    #353163;
  --color-darkslateblue-300:    #0b3d8f;
  --color-darkslateblue-400:    #093071;
  --color-darkslategray-100:    #0a5a70;
  --color-darkslategray-200:    #2e2e2e;
  --color-deepskyblue:          #13abd4;
  --color-dimgray:              #5e5e5e;
  --color-dodgerblue:           #3e86fc;
  --color-gainsboro-100:        #eae6ec;
  --color-gainsboro-200:        #e6e6ec;
  --color-gainsboro-300:        #e6e6e6;
  --color-goldenrod:            #dc9719;
  --color-gray-100:             #919191;
  --color-gray-200:             #1c032d;
  --color-gray-300:             #170224;
  --color-gray-400:             #12021c;
  --color-gray-500:             #06032e;
  --color-gray-600:             #050225;
  --color-gray-700:             #04021d;
  --color-gray-800:             rgba(255, 255, 255, 0.8);
  --color-lavender-100:         #e8f0ff;
  --color-lavender-200:         #e9ebf8;
  --color-lightskyblue:         #9abffd;
  --color-lightslategray-100:   #a393ac;
  --color-lightslategray-200:   #9593ad;
  --color-lightslategray-300:   #8e98a8;
  --color-lightsteelblue:       #c7dbfe;
  --color-limegreen:            #0eb018;
  --color-midnightblue-100:     #220336;
  --color-midnightblue-200:     #080337;
  --color-powderblue:           #c7f2fe;
  --color-royalblue-100:        #115bd5;
  --color-royalblue-200:        #0e4cb2;
  --color-silver-100:           #cbc3d1;
  --color-silver-200:           #c4c3d1;
  --color-silver-300:           #c2c2c2;
  --color-skyblue-100:          #9be8fc;
  --color-skyblue-200:          #6cddfb;
  --color-skyblue-300:          #40d3fa;
  --color-slategray-100:        #786186;
  --color-slategray-200:        #646187;
  --color-steelblue-100:        #108fb1;
  --color-steelblue-200:        #0d738e;

  /* ----------------------------------------------------------
     Typography
     ---------------------------------------------------------- */
  --font-inter:    Inter, sans-serif;
  --font-poppins:  Poppins, sans-serif;

  /* Font sizes */
  --fs-6:   6px;
  --fs-8:   8px;
  --fs-10:  10px;
  --fs-14:  14px;
  --fs-16:  16px;
  --fs-18:  18px;
  --fs-20:  20px;
  --fs-22:  22px;
  --fs-24:  24px;
  --fs-32:  32px;
  --fs-56:  56px;

  /* Line heights */
  --lh-10:  10px;
  --lh-16:  16px;
  --lh-20:  20px;
  --lh-24:  24px;
  --lh-30:  30px;
  --lh-40:  40px;
  --lh-48:  48px;

  /* Font weights */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ----------------------------------------------------------
     Spacing / Gap
     ---------------------------------------------------------- */
  --gap-0:    0px;
  --gap-1:    1px;
  --gap-2:    2px;
  --gap-4:    4px;
  --gap-6:    6px;
  --gap-8:    8px;
  --gap-10:   10px;
  --gap-16:   16px;
  --gap-30:   30px;
  --gap-80:   80px;

  /* ----------------------------------------------------------
     Padding
     ---------------------------------------------------------- */
  --padding-0:  0px;
  --padding-1:  1px;
  --padding-2:  2px;
  --padding-3:  3px;
  --padding-4:  4px;
  --padding-7:  7px;
  --padding-15: 15px;
  --padding-24: 24px;
  --padding-32: 32px;
  --padding-40: 40px;

  /* ----------------------------------------------------------
     Border Radius
     ---------------------------------------------------------- */
  --br-5:  5px;
  --br-7:  7px;
  --br-12: 12px;
  --br-16: 16px;

  /* ----------------------------------------------------------
     Borders
     ---------------------------------------------------------- */
  --border-1: 1px solid var(--color-lavender-200);

  /* ----------------------------------------------------------
     Shadows
     ---------------------------------------------------------- */
  --shadow-drop: 0px 0px 15px rgba(0, 0, 0, 0.15);

  /* ----------------------------------------------------------
     Width / Height Tokens
     ---------------------------------------------------------- */
  --height-10:  10px;
  --height-75:  75px;
  --width-10:   10px;
  --width-75:   75px;
  --max-w-160:  160px;
  --min-w-90:   90px;
  --min-w-310:  310px;

  /* ----------------------------------------------------------
     Icon Sizes
     ---------------------------------------------------------- */
  --icon-size-sm: 16px;
  --icon-size-md: 24px;
  --icon-size-lg: 40px;
}