/* ./assets/css/main.css */

@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@1,800,500,100,700,400,300,200,900&f[]=satoshi@1,900,700,500,301,701,300,501,401,901,400,2&display=swap');

@import url('./colors.css');

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

  :root,
  .theme-main {
    --primary-100: 250 246 254;
    --primary-200: 228 210 249;
    --primary-300: 200 165 243;
    --primary-400: 113 71 232;
    --primary-500: 64 16 124;
    --primary-600: 47 12 90;
    --primary-700: 35 9 68;
    --primary-800: 24 6 45;
    --primary-900: 12 3 23;

    --secondary-50: 254 249 246;
    --secondary-100: 249 224 210;
    --secondary-200: 243 194 165;
    --secondary-300: 237 163 120;
    --secondary-400: 232 132 74;
    --secondary-500: 229 117 52;
    --secondary-600: 203 91 26;
    --secondary-700: 181 81 23;
    --secondary-800: 124 55 16;
    --secondary-900: 23 10 3;

    --middle_gr: 108 84 130;
  }
  .theme-main2 {
    --primary-50: 250 246 254;
    --primary-100: 228 210 249;
    --primary-200: 200 165 243;
    --primary-300: 173 120 237;
    --primary-400: 145 74 232;
    --primary-500: 106 26 203;
    --primary-600: 82 21 158;
    --primary-700: 64 16 124;
    --primary-800: 35 9 68;
    --primary-900: 12 3 23;

    --secondary-50: 252 248 247;
    --secondary-100: 255 245 244;
    --secondary-200: 248 215 210;
    --secondary-300: 229 142 121;
    --secondary-400: 205 97 72;
    --secondary-500: 195 60 31;
    --secondary-600: 175 46 21;
    --secondary-700: 158 27 9;
    --secondary-800: 128 20 12;
    --secondary-900: 99 17 12;
  }
  .theme-dawn {
    --secondary-100: 250 246 254;
    --secondary-200: 228 210 249;
    --secondary-300: 200 165 243;
    --secondary-400: 113 71 232;
    --secondary-500: 64 16 124;
    --secondary-600: 47 12 90;
    --secondary-700: 35 9 68;
    --secondary-800: 24 6 45;
    --secondary-900: 12 3 23;

    --primary-100: 254 249 246;
    --primary-200: 249 226 210;
    --primary-300: 243 198 165;
    --primary-400: 232 132 74;
    --primary-500: 181 81 23;
    --primary-600: 158 71 21;
    --primary-700: 113 51 15;
    --primary-800: 124 55 16;
    --primary-900: 23 10 3;
  }
  .theme-dawn2 {
    --secondary-50: 247 244 254;
    --secondary-100: 225 214 254;
    --secondary-200: 178 168 234;
    --secondary-300: 146 126 220;
    --secondary-400: 109 77 195;
    --secondary-500: 82 35 169;
    --secondary-600: 69 5 151;
    --secondary-700: 61 7 133;
    --secondary-800: 53 11 115;
    --secondary-900: 35 6 95;

    --primary-50: 252 248 247;
    --primary-100: 255 245 244;
    --primary-200: 248 215 210;
    --primary-300: 229 142 121;
    --primary-400: 205 97 72;
    --primary-500: 195 60 31;
    --primary-600: 175 46 21;
    --primary-700: 158 27 9;
    --primary-800: 128 20 12;
    --primary-900: 99 17 12;
  }
  .theme-dusk {
    --secondary-50: 251 246 254;
    --secondary-100: 234 210 249;
    --secondary-200: 213 165 243;
    --secondary-300: 192 120 237;
    --secondary-400: 171 74 232;
    --secondary-500: 150 29 226;
    --secondary-600: 120 23 181;
    --secondary-700: 82 16 124;
    --secondary-800: 45 9 68;
    --secondary-900: 15 3 23;

    --primary-50: 250 246 254;
    --primary-100: 228 210 249;
    --primary-200: 200 165 243;
    --primary-300: 173 120 237;
    --primary-400: 145 74 232;
    --primary-500: 106 26 203;
    --primary-600: 82 21 158;
    --primary-700: 64 16 124;
    --primary-800: 35 9 68;
    --primary-900: 12 3 23;
  }
  .theme-sun {
    --secondary-50: 254 249 246;
    --secondary-100: 249 224 210;
    --secondary-200: 243 194 165;
    --secondary-300: 237 163 120;
    --secondary-400: 232 132 74;
    --secondary-500: 229 117 52;
    --secondary-600: 203 91 26;
    --secondary-700: 181 81 23;
    --secondary-800: 124 55 16;
    --secondary-900: 23 10 3;

    --primary-50: 252 248 247;
    --primary-100: 255 245 244;
    --primary-200: 248 215 210;
    --primary-300: 229 142 121;
    --primary-400: 205 97 72;
    --primary-500: 195 60 31;
    --primary-600: 175 46 21;
    --primary-700: 158 27 9;
    --primary-800: 128 20 12;
    --primary-900: 99 17 12;
  }
  .theme-kadence_orange {
    --primary-100: var(--base_lighter);
    --primary-200: var(--base_light);
    --primary-300: var(--base_subtle);
    --primary-400: var(--accent_light);
    --primary-500: var(--accent);
    --primary-600: var(--contrast_subtle);
    --primary-700: var(--contrast_medium);
    --primary-800: var(--contrast_strong);
    --primary-900: var(--contrast_strongest);

    --secondary-200: var(--accent_alt_light);
    --secondary-500: var(--accent_alt);
  }
  .theme-kadence_indigo {
    --primary-100: var(--base_lighter);
    --primary-200: var(--base_light);
    --primary-300: var(--base_subtle);
    --primary-400: var(--accent_light);
    --primary-500: var(--accent);
    --primary-600: var(--contrast_subtle);
    --primary-700: var(--contrast_medium);
    --primary-800: var(--contrast_strong);
    --primary-900: var(--contrast_strongest);

    --secondary-200: var(--accent_alt_light);
    --secondary-500: var(--accent_alt);
  }

  .theme-kadence_dawn {
    --primary-100: var(--base_lighter);
    --primary-200: var(--base_light);
    --primary-300: var(--base_subtle);
    --primary-400: var(--accent_light);
    --primary-500: var(--accent);
    --primary-600: var(--contrast_subtle);
    --primary-700: var(--contrast_medium);
    --primary-800: var(--contrast_strong);
    --primary-900: var(--contrast_strongest);

    --secondary-200: var(--accent_alt_light);
    --secondary-500: var(--accent_alt);
  }

:root {
  --header-height: 62px;
  --footer-height: 56px;
}

* {
  @apply scroll-m-20;

}

html {
  scroll-behavior: smooth;
}

body {
  @apply text-slate-700;
}

body.dark {
  @apply text-slate-50 bg-primary-900;
}


a {
  text-decoration: underline;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  @apply font-header;
}

.icon {
  @apply inline-flex w-6 h-6;
}

.icon.solid {
  @apply fill-slate-500;
}

.icon.solid-dark {
  @apply fill-slate-50;
}

.icon.stroke {
  @apply stroke-slate-500;
}

.icon.stroke.stroke-dark {
  @apply stroke-slate-50;
}

.img-cont img {
  @apply h-full w-full object-cover;
}

.article-tags {
  @apply flex gap-2 py-2 flex-wrap justify-center md:justify-start;
}

.article-tags .tag {
  @apply bg-secondary-light dark:bg-secondary-light text-slate-700 dark:text-slate-200 text-sm p-2 py-1 rounded-md;
  @apply transition-all !py-0.5 hover:-translate-y-0.5;
}

/* BLOG PAGES */

.page-heading {
  @apply p-12 bg-primary-200 dark:bg-primary-800;
}

.page-heading>.wrapper {
  @apply max-w-3xl m-auto;
}

.page-section {
  @apply p-4 py-8 m-auto max-w-3xl;
}

.article-list {
  @apply flex flex-col gap-6;
}

.article-item {
  @apply pt-6 first-of-type:border-none border-t border-primary-700 dark:border-primary-300;
}

.article-item a {
  @apply no-underline;
}

.article-item>*>.wrapper {
  @apply flex flex-col md:flex-row items-center md:items-start gap-4;
}

/* navigation */
.mobile-nav {
  @apply py-1;
}

.mobile-nav a {
  @apply border-b border-b-secondary-light;
  @apply block w-full no-underline p-2 text-primary-100 text-base;
}