/* Waafir Design System - Color Palette */

:root {
  /* Primary Colors - Teal/Green Gradient */
  --primary-5: #E1F5F0;
  --primary-25: #C1E9DF;
  --primary-50: #ACE2D5;
  --primary-100: #97D8CA;
  --primary-150: #83D4BF;
  --primary-200: #6ECDB5;
  --primary-300: #59C5AA;
  --primary-400: #45BEA0;
  --primary-500: #30B795;
  --primary-600: #1F907C;
  --primary-700: #008462;
  --primary-800: #006849;
  --primary-850: #00512F;
  --primary-900: #003816;
  --primary-950: #001E00;
  --primary-975: #000500;
  --primary-1000: #050911;

  /* Secondary Colors - Orange/Brown Gradient */
  --secondary-25: #FEF7EC;
  --secondary-50: #FCEED9;
  --secondary-100: #FBE6C4;
  --secondary-150: #FADEB3;
  --secondary-200: #FBD5A0;
  --secondary-300: #F9C47B;
  --secondary-400: #F2B355;
  --secondary-500: #EFA22F;
  --secondary-600: #CE8B27;
  --secondary-700: #AE741F;
  --secondary-800: #9D5E16;
  --secondary-850: #7D5212;
  --secondary-900: #60470E;
  --secondary-950: #5C3B0A;
  --secondary-975: #4C3006;

  /* Text Colors - Dark Grey/Black Gradient */
  --text-25: #7D8A92;
  --text-50: #77848C;
  --text-100: #727E85;
  --text-150: #6C777F;
  --text-200: #667178;
  --text-300: #5B656B;
  --text-400: #4F585E;
  --text-500: #444C51;
  --text-550: #9CA3AF
  --text-600: #394044;
  --text-700: #2E3336;
  --text-800: #222729;
  --text-850: #1D2122;
  --text-900: #171A1B;
  --text-950: #121415;
  --text-975: #0C0E0E;

  /* Text Light Colors - Light Grey/Off-white Gradient */
  --text-light-25: #FDFDFE;
  --text-light-50: #FCFCFD;
  --text-light-100: #FAFBFC;
  --text-light-150: #F9F9FB;
  --text-light-200: #F7F8FA;
  --text-light-300: #F6F6F7;
  --text-light-400: #F1F3F5;
  --text-light-500: #EEF1F3;
  --text-light-600: #EBECEF;
  --text-light-700: #E8ECEF;
  --text-light-800: #E5EAEB;
  --text-light-850: #E4E9EB;
  --text-light-900: #E2E7EA;
  --text-light-950: #E1E6E9;
  --text-light-975: #DFE5E8;

  /* Error Colors - Pink/Red Gradient */
  --error-25: #FFDFDD;
  --error-50: #FFDCCD;
  --error-100: #FFC0BC;
  --error-150: #FFB1AC;
  --error-200: #FFA19C;
  --error-300: #FF937B;
  --error-400: #FF645B;
  --error-500: #FF453A;
  --error-600: #EA392E;
  --error-700: #D52D23;
  --error-800: #C02017;
  --error-850: #B11A11;
  --error-900: #A8140C;
  --error-950: #A10E05;
  --error-975: #960B00;

  /* Success Colors - Green Gradient */
  --success-25: #BBF1D7;
  --success-50: #ACEBCD;
  --success-100: #9FDECB;
  --success-150: #8FEDB9;
  --success-200: #80DBAF;
  --success-300: #62CF9B;
  --success-400: #45CA87;
  --success-500: #27D773;
  --success-600: #20975E;
  --success-700: #197649;
  --success-800: #115434;
  --success-850: #0E432A;
  --success-900: #0A331F;
  --success-950: #072215;
  --success-975: #03110A;

  /* Base White Colors with Opacity */
  --white-100: #FDFDFE;
  --white-96: rgba(253, 253, 254, 0.96);
  --white-88: rgba(253, 253, 254, 0.88);
  --white-80: rgba(253, 253, 254, 0.80);
  --white-72: rgba(253, 253, 254, 0.72);
  --white-64: rgba(253, 253, 254, 0.64);
  --white-56: rgba(253, 253, 254, 0.56);
  --white-48: rgba(253, 253, 254, 0.48);
  --white-40: rgba(253, 253, 254, 0.40);
  --white-32: rgba(253, 253, 254, 0.32);
  --white-24: rgba(253, 253, 254, 0.24);
  --white-16: rgba(253, 253, 254, 0.16);
  --white-8: rgba(253, 253, 254, 0.08);

  /* Base Black Colors with Opacity */
  --black-100: #181818;
  --black-96: rgba(24, 24, 24, 0.96);
  --black-88: rgba(24, 24, 24, 0.88);
  --black-80: rgba(24, 24, 24, 0.80);
  --black-72: rgba(24, 24, 24, 0.72);
  --black-64: rgba(24, 24, 24, 0.64);
  --black-56: rgba(24, 24, 24, 0.56);
  --black-48: rgba(24, 24, 24, 0.48);
  --black-40: rgba(24, 24, 24, 0.40);
  --black-32: rgba(24, 24, 24, 0.32);
  --black-24: rgba(24, 24, 24, 0.24);
  --black-16: rgba(24, 24, 24, 0.16);
  --black-8: rgba(24, 24, 24, 0.08);

  --cerise-pink-50: #FBD8E4;
  --cerise-pink-950: #971641;
  
  /* Semantic Color Aliases for Common Use Cases */
  --color-primary: var(--primary-500);
  --color-primary-light: var(--primary-300);
  --color-primary-dark: var(--primary-850);
  --color-primary-hover: var(--primary-600);
  --color-primary-active: var(--primary-800);

  --color-secondary: var(--secondary-500);
  --color-secondary-light: var(--secondary-300);
  --color-secondary-dark: var(--secondary-700);
  --color-secondary-hover: var(--secondary-600);
  --color-secondary-active: var(--secondary-800);

  --color-text: var(--text-500);
  --color-text-light: var(--text-300);
  --color-text-dark: var(--text-700);
  --color-text-muted: var(--text-400);

  --color-background: var(--text-light-25);
  --color-background-secondary: var(--text-light-100);
  --color-background-tertiary: var(--text-light-200);

  --color-border: var(--text-light-300);
  --color-border-light: var(--text-light-200);
  --color-border-dark: var(--text-light-400);

  --color-success: var(--success-500);
  --color-success-light: var(--success-300);
  --color-success-dark: var(--success-700);
  --color-success-background: var(--success-25);

  --color-error: var(--error-500);
  --color-error-light: var(--error-300);
  --color-error-dark: var(--error-700);
  --color-error-background: var(--error-25);

  --color-white: var(--white-100);
  --color-black: var(--black-100);

  /* Accent Colors - Additional Color Palette */

  /* Violet Colors */
  --violet-25: #F3F5FE;
  --violet-50: #EAE3F0;
  --violet-100: #DED4FD;
  --violet-150: #D2C4FC;
  --violet-200: #ACABAFC;
  --violet-300: #AF95FA;
  --violet-400: #9775F9;
  --violet-500: #7F54F8;
  --violet-600: #6F46E7;
  --violet-700: #5F36D6;
  --violet-800: #4F27C6;
  --violet-850: #471FBD;
  --violet-900: #3F17B5;
  --violet-950: #3710FAC;
  --violet-975: #2F07A4;

  /* Cerise Pink Colors */
  --cerise-pink-25: #FCE7EE;
  --cerise-pink-50: #FBD8E4;
  --cerise-pink-100: #F9C9D9;
  --cerise-pink-150: #F8B8CF;
  --cerise-pink-200: #F6ACC4;
  --cerise-pink-300: #F59BE0;
  --cerise-pink-400: #F07F9B;
  --cerise-pink-500: #ED5586;
  --cerise-pink-600: #DA4577;
  --cerise-pink-700: #C73867;
  --cerise-pink-800: #B42A58;
  --cerise-pink-850: #AB2350;
  --cerise-pink-900: #A11D4B;
  --cerise-pink-950: #981641;
  --cerise-pink-975: #8F0E37;

  /* Orange Colors */
  --orange-25: #FCEBE7;
  --orange-50: #FBE4DB;
  --orange-100: #F9D9C9;
  --orange-150: #F8CBBB;
  --orange-200: #F6C4AC;
  --orange-300: #F5B0BE;
  --orange-400: #F09B71;
  --orange-500: #ED8653;
  --orange-600: #DA7745;
  --orange-700: #C76738;
  --orange-800: #B4582A;
  --orange-850: #A85023;
  --orange-900: #A14B1D;
  --orange-950: #984115;
  --orange-975: #8E390F;

  /* Sandstorm Colors */
  --sandstorm-25: #FFFDF4;
  --sandstorm-50: #FEFEEA;
  --sandstorm-100: #FEF2D4;
  --sandstorm-150: #FDF3C5;
  --sandstorm-200: #FDFDB5;
  --sandstorm-300: #FBEA95;
  --sandstorm-400: #FAE376;
  --sandstorm-500: #F9D056;
  --sandstorm-600: #EBCCA6;
  --sandstorm-700: #D8BC36;
  --sandstorm-800: #C7AB26;
  --sandstorm-850: #BFA31E;
  --sandstorm-900: #B79B16;
  --sandstorm-950: #AE920E;
  --sandstorm-975: #A68A06;

  /* Acid Green Colors */
  --acid-green-25: #F3FEFA;
  --acid-green-50: #E3FDE6;
  --acid-green-100: #D4FDD7;
  --acid-green-150: #C4FCCD;
  --acid-green-200: #BAFCBA;
  --acid-green-300: #95FA9E;
  --acid-green-400: #75F981;
  --acid-green-500: #56F864;
  --acid-green-600: #45E754;
  --acid-green-700: #36D444;
  --acid-green-800: #27C634;
  --acid-green-850: #1FBD2C;
  --acid-green-900: #17B524;
  --acid-green-950: #0FAC1C;
  --acid-green-975: #076A14;

  /* Bright Teal Colors */
  --bright-teal-25: #C9FDF5;
  --bright-teal-50: #B9FDF2;
  --bright-teal-100: #A9FCEF;
  --bright-teal-150: #99FCEC;
  --bright-teal-200: #8AFBE9;
  --bright-teal-300: #6AFAE2;
  --bright-teal-400: #48FBDC;
  --bright-teal-500: #28FBDA;
  --bright-teal-600: #23DFCD;
  --bright-teal-700: #1BCBAA;
  --bright-teal-800: #14AE94;
  --bright-teal-850: #10A789;
  --bright-teal-900: #0C9576;
  --bright-teal-950: #088D73;
  --bright-teal-975: #047C68;

  /* Blue Colors */
  --blue-25: #F3FBFE;
  --blue-50: #E3F5FD;
  --blue-100: #D4F0FD;
  --blue-150: #CAEAFC;
  --blue-200: #B4EAFC;
  --blue-300: #95D9FA;
  --blue-400: #75CDFF;
  --blue-500: #56C2F0;
  --blue-600: #44B2E7;
  --blue-700: #36A1D6;
  --blue-800: #2791C6;
  --blue-850: #1F89BD;
  --blue-900: #1780B5;
  --blue-950: #0F78AC;
  --blue-975: #0770A4;

  /* Additional Semantic Color Aliases for Accent Colors */
  --color-violet: var(--violet-500);
  --color-violet-light: var(--violet-300);
  --color-violet-dark: var(--violet-700);
  --color-violet-hover: var(--violet-600);
  --color-violet-active: var(--violet-800);

  --color-cerise-pink: var(--cerise-pink-500);
  --color-cerise-pink-light: var(--cerise-pink-300);
  --color-cerise-pink-dark: var(--cerise-pink-700);
  --color-cerise-pink-hover: var(--cerise-pink-600);
  --color-cerise-pink-active: var(--cerise-pink-800);

  --color-orange: var(--orange-500);
  --color-orange-light: var(--orange-300);
  --color-orange-dark: var(--orange-700);
  --color-orange-hover: var(--orange-600);
  --color-orange-active: var(--orange-800);

  --color-sandstorm: var(--sandstorm-500);
  --color-sandstorm-light: var(--sandstorm-300);
  --color-sandstorm-dark: var(--sandstorm-700);
  --color-sandstorm-hover: var(--sandstorm-600);
  --color-sandstorm-active: var(--sandstorm-800);

  --color-acid-green: var(--acid-green-500);
  --color-acid-green-light: var(--acid-green-300);
  --color-acid-green-dark: var(--acid-green-700);
  --color-acid-green-hover: var(--acid-green-600);
  --color-acid-green-active: var(--acid-green-800);

  --color-bright-teal: var(--bright-teal-500);
  --color-bright-teal-light: var(--bright-teal-300);
  --color-bright-teal-dark: var(--bright-teal-700);
  --color-bright-teal-hover: var(--bright-teal-600);
  --color-bright-teal-active: var(--bright-teal-800);

  --color-blue: var(--blue-500);
  --color-blue-light: var(--blue-300);
  --color-blue-dark: var(--blue-700);
  --color-blue-hover: var(--blue-600);
  --color-blue-active: var(--blue-800);
}

/* Utility Classes for Common Color Applications */
.text-primary { color: var(--color-primary); }
.text-primary-850 { color: var(--primary-850); }
.text-primary-900 { color: var(--primary-900); }
.text-secondary-500 { color: var(--text-500); }
.text-secondary-600 { color: var(--text-600); }
.text-secondary-700 { color: var(--text-700); }
.text-secondary-800 { color: var(--text-800); }
.text-secondary-850 { color: var(--text-850); }
.text-secondary-900 { color: var(--text-900); }
.text-secondary-950 { color: var(--text-950); }
.text-secondary { color: var(--color-secondary); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-muted { color: var(--color-text-muted); }

/* Accent Color Text Utilities */
.text-violet { color: var(--color-violet); }
.text-cerise-pink { color: var(--color-cerise-pink); }
.text-orange { color: var(--color-orange); }
.text-sandstorm { color: var(--color-sandstorm); }
.text-acid-green { color: var(--color-acid-green); }
.text-bright-teal { color: var(--color-bright-teal); }
.text-blue { color: var(--color-blue); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-success { background-color: var(--color-success); }
.bg-error { background-color: var(--color-error) !important; }
.bg-light { background-color: var(--color-background-secondary); }

/* Accent Color Background Utilities */
.bg-violet { background-color: var(--color-violet); }
.bg-cerise-pink { background-color: var(--color-cerise-pink); }
.bg-orange { background-color: var(--color-orange); }
.bg-sandstorm { background-color: var(--color-sandstorm); }
.bg-acid-green { background-color: var(--color-acid-green); }
.bg-bright-teal { background-color: var(--color-bright-teal); }
.bg-blue { background-color: var(--color-blue); }

.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }
.border-light { border-color: var(--color-border-light); }
.border-dark { border-color: var(--color-border-dark); }

/* Accent Color Border Utilities */
.border-violet { border-color: var(--color-violet); }
.border-cerise-pink { border-color: var(--color-cerise-pink); }
.border-orange { border-color: var(--color-orange); }
.border-sandstorm { border-color: var(--color-sandstorm); }
.border-acid-green { border-color: var(--color-acid-green); }
.border-bright-teal { border-color: var(--color-bright-teal); }
.border-blue { border-color: var(--color-blue); }

/* Button Color Variants */
.btn-primary {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}

.btn-primary:hover, .btn-primary:active {
  background: var(--primary-900) !important;
  transform: translateY(-1px) !important;
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--primary-25);
    color: var(--text-light-25);
}

.btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

.btn-secondary:hover {
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
}

.btn-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-white);
}

.btn-error {
  background-color: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-white);
}

/* Accent Color Button Variants */
.btn-violet {
  background-color: var(--color-violet);
  border-color: var(--color-violet);
  color: var(--color-white);
}

.btn-violet:hover {
  background-color: var(--color-violet-hover);
  border-color: var(--color-violet-hover);
}

.btn-cerise-pink {
  background-color: var(--color-cerise-pink);
  border-color: var(--color-cerise-pink);
  color: var(--color-white);
}

.btn-cerise-pink:hover {
  background-color: var(--color-cerise-pink-hover);
  border-color: var(--color-cerise-pink-hover);
}

.btn-orange {
  background-color: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-white);
}

.btn-orange:hover {
  background-color: var(--color-orange-hover);
  border-color: var(--color-orange-hover);
}

.btn-sandstorm {
  background-color: var(--color-sandstorm);
  border-color: var(--color-sandstorm);
  color: var(--color-black);
}

.btn-sandstorm:hover {
  background-color: var(--color-sandstorm-hover);
  border-color: var(--color-sandstorm-hover);
}

.btn-acid-green {
  background-color: var(--color-acid-green);
  border-color: var(--color-acid-green);
  color: var(--color-white);
}

.btn-acid-green:hover {
  background-color: var(--color-acid-green-hover);
  border-color: var(--color-acid-green-hover);
}

.btn-bright-teal {
  background-color: var(--color-bright-teal);
  border-color: var(--color-bright-teal);
  color: var(--color-white);
}

.btn-bright-teal:hover {
  background-color: var(--color-bright-teal-hover);
  border-color: var(--color-bright-teal-hover);
}

.btn-blue {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
}

.btn-blue:hover {
  background-color: var(--color-blue-hover);
  border-color: var(--color-blue-hover);
}

/* Currency Display Styles */
.currency-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.currency-superscript {
  font-size: 0.7em;
  color: var(--text-400);
  line-height: 1;
  margin-right: 2px;
  vertical-align: top;
}

.amount-main {
  font-size: 1em;
  color: var(--text-600);
  line-height: 1;
}