@use "../tailwind";
@use "../scss/settings/typography" as *;
@use "../scss/libs/mediaelementjs/styles" as *;

@layer base {
  :root {
    --color-primary-base: 46 117 163;
    --color-primary-gradient: 36 77 103;
    --color-primary-button-text: 46 117 163;
    --color-primary-button-alternative-text: 255 255 255;

    --color-secondary-base: 243 126 47;
    --color-secondary-gradient: 224 100 16;
    --color-secondary-button-text: 255 255 255;

    --color-tertiary-base: 51 51 51;
    --color-tertiary-gradient: 0 0 0;
    --color-tertiary-button-text: 255 255 255;

    --color-success-base: 119 170 12;
    --color-success-gradient: 83 127 0;
    --color-success-button-text: 255 255 255;

    --color-info-base: 13 123 253;
    --color-info-gradient: 0 84 211;
    --color-info-button-text: 255 255 255;

    --color-warning-base: 245 206 1;
    --color-warning-gradient: 186 152 0;
    --color-warning-button-text: 0 0 0;

    --color-danger-base: 223 59 59;
    --color-danger-gradient: 180 0 21;
    --color-danger-button-text: 255 255 255;

    --color-form-base: 46 117 163;
  }
}

body {
  @apply prose max-w-none space-y-4
    prose-h1:text-h1
    prose-h2:text-h2
    prose-h3:text-h3
    prose-h4:text-h4
    prose-h5:text-h5
    prose-h6:text-h6
    prose-img:inline-block prose-img:my-2
    prose-a:text-info
  ;

  > * {
    @apply my-0;
  }
}