@tailwind base;

@tailwind components;

@tailwind utilities;




@layer base {
/* Nabeel - add custom font */
@font-face {
  font-family: tajawal;
  src: url('/font/tajawal.ttf'); /* Safari, Android, iOS */
  src: url('/font/tajawal.eot'); /* IE9 Compat Modes */
  src: url('/font/tajawal.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/font/tajawal.woff2') format('woff2'), /* Super Modern Browsers */
       url('/font/tajawal.woff') format('woff'), /* Pretty Modern Browsers */
       url('/font/tajawal.svg#tajawal') format('svg'); /* Legacy iOS */
}

  :root {
/* Nabeel - light mode hover color */
    --color-fePrimary-50: 238 242 255;
    --color-fePrimary-100: 244 205 206;
    --color-fePrimary-200: 240 184 185;
/* Nabeel - buttun focus ring color */
    --color-fePrimary-300: 185 208 230;
    --color-fePrimary-400: 228 129 132;
/* Nabeel - main-color and buttuns */
    --color-fePrimary-500: 11 52 134;
/* Nabeel - buttuns hover color */
    --color-fePrimary-600: 18 85 224;
/* Nabeel - buttuns clicking color */
    --color-fePrimary-700: 56 116 239;
    --color-fePrimary-800: 92 20 22;
/* Nabeel - dark mode hover color */
    --color-fePrimary-900: 73 83 87;
/* Nabeel - item detail description cards */
    --color-feSecondary-50: 214 226 240;
    --color-feSecondary-100: 222 223 227;
    --color-feSecondary-200: 208 210 216;
    --color-feSecondary-300: 194 197 204;
    --color-feSecondary-400: 172 176 185;
/* Nabeel - field placeholder text - about us icons and text */
    --color-feSecondary-500: 36 68 97;
    --color-feSecondary-600: 84 89 100;
    --color-feSecondary-700: 65 69 78;
    --color-feSecondary-800: 51 54 61;
/* Nabeel - fix footer color and top color */
    --color-feSecondary-900: 4 27 73;
    --color-feAccent-50: 252 232 242;
    --color-feAccent-100: 249 200 224;
    --color-feAccent-200: 246 177 211;
    --color-feAccent-300: 244 154 198;
    --color-feAccent-400: 240 117 177;
    --color-feAccent-500: 235 72 152;
    --color-feAccent-600: 166 18 90;
    --color-feAccent-700: 129 14 70;
    --color-feAccent-800: 101 11 55;
    --color-feAccent-900: 78 9 43;
    --color-feSuccess-50: 232 253 246;
    --color-feSuccess-100: 199 250 233;
    --color-feSuccess-200: 175 248 224;
    --color-feSuccess-300: 152 246 215;
    --color-feSuccess-400: 114 243 200;
    --color-feSuccess-500: 16 185 129;
    --color-feSuccess-600: 15 169 118;
    --color-feSuccess-700: 11 131 92;
    --color-feSuccess-800: 9 103 72;
    --color-feSuccess-900: 7 80 56;
    --color-feError-50: 253 232 232;
    --color-feError-100: 250 199 199;
    --color-feError-200: 248 175 175;
    --color-feError-300: 246 152 152;
    --color-feError-400: 243 114 114;
    --color-feError-500: 239 68 68;
    --color-feError-600: 169 14 14;
    --color-feError-700: 132 11 11;
    --color-feError-800: 103 9 9;
    --color-feError-900: 80 7 7;
    --color-feWarning-50: 254 245 231;
    --color-feWarning-100: 253 232 196;
    --color-feWarning-200: 252 222 172;
    --color-feWarning-300: 251 212 147;
    --color-feWarning-400: 249 197 108;
    --color-feWarning-500: 245 158 11;
    --color-feWarning-600: 176 113 7;
    --color-feWarning-700: 137 88 6;
    --color-feWarning-800: 108 69 4;
    --color-feWarning-900: 83 54 3;
    --color-feInfo-50: 231 239 254;
    --color-feInfo-100: 196 218 252;
    --color-feInfo-200: 172 202 251;
    --color-feInfo-300: 148 187 250;
    --color-feInfo-400: 109 162 248;
    --color-feInfo-500: 59 130 246;
    --color-feInfo-600: 8 72 176;
    --color-feInfo-700: 6 56 137;
    --color-feInfo-800: 5 44 107;
    --color-feInfo-900: 4 34 83;
/* Nabeel - fix background color */
    --color-feAchromatic-50: 226 238 253;
/* Nabeel - fix navbar color */
    --color-feAchromatic-100: 214 226 240;
    --color-feAchromatic-150: 211 211 211;
    --color-feAchromatic-200: 214 214 214;
    --color-feAchromatic-300: 184 184 184;
    --color-feAchromatic-400: 153 153 153;
    --color-feAchromatic-500: 133 133 133;
    --color-feAchromatic-600: 102 102 102;
    --color-feAchromatic-700: 54 54 54;
    --color-feAchromatic-800: 41 41 41;
    --color-feAchromatic-900: 18 18 18;
/* Nabeel - fix color */
    --color-feBrand-phone: 60 137 52;
/* Nabeel - fix color */
    --color-feBrand-google: 221 82 70;
/* Nabeel - fix color */
    --color-feBrand-facebook: 59 89 152;
    --color-feBrand-apple: 0 0 0;
    --color-feBrand-paypal: 59 123 191;
    --color-feBrand-stripe: 0 140 221;
    --color-feBrand-razor: 1 38 82;
    --color-feBrand-paystack: 0 195 247;
    --color-feBrand-twitter: 0 0 0;
    --color-feBrand-linkedin: 10 102 194;
  }
}