// Importing Tailwind CSS styles after sass compilation
/*@import "tailwindcss"*/

@use "layouts/wp"
@use "layouts/page"
@use "layouts/aside"
@use "layouts/content"

@use "components/logo"
@use "components/divider"
@use "components/nav"
@use "components/notification"

@use "controls/label"
@use "controls/control"
@use "controls/helper"
@use "controls/textarea"
@use "controls/select"
@use "controls/checkbox"

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Roboto:wght@100..900&display=swap')

@theme
  /* Fonts */
  --font-roboto: 'Roboto', sans-serif
  --font-poppins: 'Poppins', sans-serif

  /* wp-blue */
  --color-wp-blue-0: #f0f6fc
  --color-wp-blue-5: #c5d9ed
  --color-wp-blue-10: #9ec2e6
  --color-wp-blue-20: #72aee6
  --color-wp-blue-30: #4f94d4
  --color-wp-blue-40: #3582c4
  --color-wp-blue-50: #2271b1
  --color-wp-blue-60: #135e96
  --color-wp-blue-70: #0a4b78
  --color-wp-blue-80: #043959
  --color-wp-blue-90: #01263a
  --color-wp-blue-100: #00131c

  /* wp-gray */
  --color-wp-gray-0: #f6f7f7
  --color-wp-gray-2: #f0f0f1
  --color-wp-gray-5: #dcdcde
  --color-wp-gray-10: #c3c4c7
  --color-wp-gray-20: #a7aaad
  --color-wp-gray-30: #8c8f94
  --color-wp-gray-40: #787c82
  --color-wp-gray-50: #646970
  --color-wp-gray-60: #50575e
  --color-wp-gray-70: #3c434a
  --color-wp-gray-80: #2c3338
  --color-wp-gray-90: #1d2327
  --color-wp-gray-100: #101517

  /* wo-red */
  --color-wo-red-0: #fcf0f1
  --color-wo-red-5: #facfd2
  --color-wo-red-10: #ffabaf
  --color-wo-red-20: #ff8085
  --color-wo-red-30: #f86368
  --color-wo-red-40: #e65054
  --color-wo-red-50: #d63638
  --color-wo-red-60: #b32d2e
  --color-wo-red-70: #8a2424
  --color-wo-red-80: #691c1c
  --color-wo-red-90: #451313
  --color-wo-red-100: #240a0a

  /* wp-yellow */
  --color-wp-yellow-0: #fcf9e8
  --color-wp-yellow-5: #f5e6ab
  --color-wp-yellow-10: #f2d675
  --color-wp-yellow-20: #f0c33c
  --color-wp-yellow-30: #dba617
  --color-wp-yellow-40: #bd8600
  --color-wp-yellow-50: #996800
  --color-wp-yellow-60: #755100
  --color-wp-yellow-70: #614200
  --color-wp-yellow-80: #4a3200
  --color-wp-yellow-90: #362400
  --color-wp-yellow-100: #211600

  /* wp-green */
  --color-wp-green-0: #edfaef
  --color-wp-green-5: #b8e6bf
  --color-wp-green-10: #68de7c
  --color-wp-green-20: #1ed14b
  --color-wp-green-30: #00ba37
  --color-wp-green-40: #00a32a
  --color-wp-green-50: #008a20
  --color-wp-green-60: #007017
  --color-wp-green-70: #005c12
  --color-wp-green-80: #00450c
  --color-wp-green-90: #003008
  --color-wp-green-100: #001c05

@custom-variant dark (&:where(.dark, .dark *));