@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import '@angular/cdk/overlay-prebuilt.css';

@font-face {
  font-family: 'IBMPlexSans';
  src: url('/assets/fonts/IBMPlexSans-Thin.ttf') format('truetype');
  font-weight: 100;
}
@font-face {
  font-family: 'IBMPlexSans';
  src: url('/assets/fonts/IBMPlexSans-ExtraLight.ttf') format('truetype');
  font-weight: 200;
}
@font-face {
  font-family: 'IBMPlexSans';
  src: url('/assets/fonts/IBMPlexSans-Light.ttf') format('truetype');
  font-weight: 300;
}
@font-face {
  font-family: 'IBMPlexSans';
  src: url('/assets/fonts/IBMPlexSans-Medium.ttf') format('truetype');
  font-weight: 500;
}
@font-face {
  font-family: 'IBMPlexSans';
  src: url('/assets/fonts/IBMPlexSans-Regular.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'IBMPlexSans';
  src: url('/assets/fonts/IBMPlexSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
}
@font-face {
  font-family: 'IBMPlexSans';
  src: url('/assets/fonts/IBMPlexSans-Bold.ttf') format('truetype');
  font-weight: 700;
}
@font-face {
  font-family: 'Merriweather';
  src: url('/assets/fonts/Merriweather-Light.ttf') format('truetype');
  font-weight: 300;
}
@font-face {
  font-family: 'Merriweather';
  src: url('/assets/fonts/Merriweather-Regular.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Merriweather';
  src: url('/assets/fonts/Merriweather-Bold.ttf') format('truetype');
  font-weight: 700;
}
@font-face {
  font-family: 'Merriweather';
  src: url('/assets/fonts/Merriweather-Black.ttf') format('truetype');
  font-weight: 900;
}
@font-face {
  font-family: 'Dancing Script';
  src: url('/assets/fonts/DancingScript-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Dancing Script';
  src: url('/assets/fonts/DancingScript-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Dancing Script';
  src: url('/assets/fonts/DancingScript-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Dancing Script';
  src: url('/assets/fonts/DancingScript-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@layer base {
  :root {
    --font-primary: 'IBMPlexSans';
    --font-title: 'Merriweather';
    --font-logo: 'Dancing Script';

    --primary-950: 17 24 38;
    --primary-900: 37 55 82;
    --primary-800: 59 89 125;
    --primary-700: 81 125 168;
    --primary-600: 103 165 212;
    --primary-500: 127 207 254;
    --primary-400: 148 213 255;
    --primary-300: 170 219 255;
    --primary-200: 193 227 255;
    --primary-100: 216 237 255;
    --primary-50: 241 248 255;

    --secondary-950: 9 19 16;
    --secondary-900: 19 40 32;
    --secondary-800: 30 60 47;
    --secondary-700: 42 80 60;
    --secondary-600: 53 100 73;
    --secondary-500: 65 119 84;
    --secondary-400: 98 144 118;
    --secondary-300: 132 169 150;
    --secondary-200: 166 194 182;
    --secondary-100: 201 218 211;
    --secondary-50: 236 242 240;

    // --primary-950: 17 24 38;
    // --primary-900: 37 55 82;
    // --primary-800: 59 89 125;
    // --primary-700: 81 125 168;
    // --primary-600: 103 165 212;
    // --primary-500: 127 207 254;
    // --primary-400: 148 213 255;
    // --primary-300: 170 219 255;
    // --primary-200: 193 227 255;
    // --primary-100: 216 237 255;
    // --primary-50: 241 248 255;

    // --secondary-950: 9 19 16;
    // --secondary-900: 19 40 32;
    // --secondary-800: 30 60 47;
    // --secondary-700: 42 80 60;
    // --secondary-600: 53 100 73;
    // --secondary-500: 65 119 84;
    // --secondary-400: 98 144 118;
    // --secondary-300: 132 169 150;
    // --secondary-200: 166 194 182;
    // --secondary-100: 201 218 211;
    // --secondary-50: 236 242 240;

    --monochrome-950: 32 32 32;
    --monochrome-900: 53 53 53;
    --monochrome-800: 75 75 75;
    --monochrome-700: 96 96 96;
    --monochrome-600: 117 117 117;
    --monochrome-500: 139 139 139;
    --monochrome-400: 160 160 160;
    --monochrome-300: 177 177 177;
    --monochrome-200: 194 194 194;
    --monochrome-100: 211 211 211;
    --monochrome-50: 228 228 228;
    --monochrome-10: 246 246 246;
  }
}