@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: "Poppins";
    src: url("assets/fonts/Poppins-Bold.eot");
    src: url("assets/fonts/Poppins-Bold.eot?#iefix") format("embedded-opentype"),
      url("assets/fonts/Poppins-Bold.woff2") format("woff2"),
      url("assets/fonts/Poppins-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Poppins";
    src: url("assets/fonts/Poppins-Medium.eot");
    src: url("assets/fonts/Poppins-Medium.eot?#iefix") format("embedded-opentype"),
      url("assets/fonts/Poppins-Medium.woff2") format("woff2"),
      url("assets/fonts/Poppins-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Poppins";
    src: url("assets/fonts/Poppins-Regular.eot");
    src: url("assets/fonts/Poppins-Regular.eot?#iefix") format("embedded-opentype"),
      url("assets/fonts/Poppins-Regular.woff2") format("woff2"),
      url("assets/fonts/Poppins-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Poppins";
    src: url("assets/fonts/Poppins-Thin.eot");
    src: url("assets/fonts/Poppins-Thin.eot?#iefix") format("embedded-opentype"),
      url("assets/fonts/Poppins-Thin.woff2") format("woff2"),
      url("assets/fonts/Poppins-Thin.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

  html {
    font-family: "Poppins", -apple-system, "Segoe UI", system-ui, "Roboto",
      "Helvetica Neue", "Arial";
    color: var(--color-text);
  }

  *,
  ::before,
  ::after,
  .theme-dark *,
  .theme-dark::before,
  .theme-dark::after {
    /* ------------------------------- Body color ------------------------------- */
    --color-aside: #0a0e1a;
    --color-footer: 10 10 10;
    --color-text: rgb(38, 38, 38);
    /* -------------------------------------------------------------------------- */
    --color-serv: 25 29 43;
    --color-serv-50: 227 230 237;
    --color-serv-100: 200 205 223;
    --color-serv-200: 142 152 189;
    --color-serv-300: 90 104 155;
    --color-serv-400: 58 67 100;
    --color-serv-500: 25 29 43;
    --color-serv-600: 21 24 35;
    --color-serv-700: 15 17 26;
    --color-serv-800: 9 11 16;
    --color-serv-900: 6 7 10;
    /* ---------------------------------- Blue ---------------------------------- */
    --color-blue-50: 240 247 254;
    --color-blue-100: 221 237 254;
    --color-blue-200: 182 216 252;
    --color-blue-300: 137 192 250;
    --color-blue-400: 74 158 247;
    --color-blue-500: 9 109 217;
    --color-blue-600: 8 99 196;
    --color-blue-700: 7 87 171;
    --color-blue-800: 6 69 137;
    --color-blue-900: 4 49 98;
    /* ---------------------------------- Gray ---------------------------------- */
    --color-gray-50: 250 250 250;
    --color-gray-75: 240 240 240;
    --color-gray-100: 235 235 235;
    ;
    --color-gray-200: 214 214 214;
    --color-gray-300: 191 191 191;
    --color-gray-400: 166 166 166;
    --color-gray-500: 140 140 140;
    --color-gray-600: 115 115 115;
    --color-gray-700: 89 89 89;
    --color-gray-800: 64 64 64;
    --color-gray-900: 38 38 38;
  }

  /* Dark theme */
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: hsl(var(--hue), 10%, 10%);
      --fg: hsl(var(--hue), 10%, 90%);
    }
  }
}

@layer components {
  /* Separate
    ======================================================================== */

  .separate {
    @apply flex items-center text-center;
  }

  .separate::after,
  .separate::before {
    content: '';
    @apply border-b border-gray-300 flex-1;
  }

  .separate:not(:empty)::after {
    @apply ml-2;
  }

  .separate:not(:empty)::before {
    @apply mr-2;
  }
}