@import "tailwindcss/theme" layer(tailwind-theme);
@import "tailwindcss/utilities" layer(tailwind-utilities);

@theme {
  --font-heading: "Roboto", sans-serif;
  --font-body: "Roboto", sans-serif;
  --font-mono: "Roboto Mono", monospace;

  --color-background: rgb(var(--v-theme-background));
  --color-surface: rgb(var(--v-theme-surface));
  --color-on-surface: rgb(var(--v-theme-on-surface));

  --color-primary: rgb(var(--v-theme-primary));
  --color-success: rgb(var(--v-theme-success));
  --color-info: rgb(var(--v-theme-info));
  --color-warning: rgb(var(--v-theme-warning));
  --color-error: rgb(var(--v-theme-error));

  --breakpoint-*: initial;
  --breakpoint-xs: 0px;
  --breakpoint-sm: 600px;
  --breakpoint-md: 840px;
  --breakpoint-lg: 1145px;
  --breakpoint-xl: 1545px;
  --breakpoint-xxl: 2138px;
}

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

/* safelist to ensure variables are always available */
@source inline('font-heading');
@source inline('font-body');
@source inline('font-mono');

/*
  note: adopt and extend values from TailwindCSS
*/
@utility rounded-pill   { border-radius: 9999px }
@utility rounded-circle { border-radius: 50%    }
@utility rounded-shaped { border-radius: 24px 0 }

@source inline('rounded'); /* .25rem */
@source inline('rounded-{none,sm,md,lg,xl,2xl,3xl,full,pill,circle,shaped}');

/* MD3 elevation */
@utility elevation-0 {
  box-shadow: 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
  --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 0%, transparent);
}
@utility elevation-1 {
  box-shadow: 0px 1px 2px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 1px 3px 1px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
  --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 2%, transparent);
}
@utility elevation-2 {
  box-shadow: 0px 1px 2px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 2px 6px 2px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
  --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 4%, transparent);
}
@utility elevation-3 {
  box-shadow: 0px 1px 3px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 4px 8px 3px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
  --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 6%, transparent);
}
@utility elevation-4 {
  box-shadow: 0px 2px 3px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 6px 10px 4px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
  --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 8%, transparent);
}
@utility elevation-5 {
  box-shadow: 0px 4px 4px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 8px 12px 6px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
  --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 10%, transparent);
}
@utility elevation-overlay {
  background-image: linear-gradient(var(--v-elevation-overlay), var(--v-elevation-overlay));
}

/* safelist for elevation="..." props */
@source inline('elevation-{0,1,2,3,4,5}');