@import '@gouvfr/dsfr/dist/dsfr.min.css';
@import '@gouvfr/dsfr/dist/utility/icons/icons.css';
@import 'tailwindcss';
@plugin '@tailwindcss/typography';
@import './icons.css';

@source inline("text-primary");
@source inline("text-orange");

@custom-variant dark (&:where([data-fr-theme="dark"], [data-fr-theme="dark"] *));

@theme {
  --breakpoint-sm: 36em;
  --breakpoint-md: 48em;
  --breakpoint-lg: 62em;
  --breakpoint-xl: 78em;

  /* DFSR COLORS */
  --color-white: var(--grey-1000-50);
  --color-black: var(--grey-0-1000);
  --color-primary: var(--blue-france-main-525);
  --color-info: var(--info-425-625);
  --color-light-info: var(--info-950-100);
  --color-very-light-info: var(--cg-very-light-blue);
  --color-error: var(--error-425-625);
  --color-warning: var(--warning-425-625);
  --color-success: var(--green-emeraude-main-632);
  --color-yellow: var(--yellow-tournesol-850-200);
  --color-green: var(--cg-green);
  --color-purple: var(--cg-purple);
  --color-orange: var(--cg-orange);
  --color-red: var(--red-marianne-425-625-active);
  --color-grey: var(--grey-425-625);
  --color-dark-grey: var(--grey-200-850);
  /* CUSTOM COLORS */
  --color-very-light-grey: var(--cg-very-light-grey);
  --color-light-grey: var(--cg-light-grey);
}

:root {
  /* CUSTOM DSFR LIKE ADDITION */
  --cg-blue-france-main-525-hover: #9898f8;
  --cg-blue-france-main-525-active: #aeaef9;
  --outline-color: #0a76f6;

  /* CUSTOM */
  --cg-very-light-grey: #fcfcfd;
  --cg-light-grey: #f3f5f9;
  --cg-very-light-blue: #f9fbff;
  --cg-green: #58b77d;
  --cg-purple: #a96afe;
  --cg-orange: #ff9575;

  /* xs breakpoint */
  --text-xs: 0.675rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.75rem;
  --text-sm--line-height: calc(1.25 / 0.875rem);
}

:root[data-fr-theme='dark'] {
  --cg-very-light-grey: #0a0a0b;
  --cg-light-grey: #1c1e22;
  /* FIXME need equivalent in dark */
  --cg-very-light-blue: #0a0a0b;
}

@media (min-width: 36em) {
  /* sm */
}

@media (min-width: 48em) {
  /* md */
  :root {
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
  }
}

@media (min-width: 62em) {
  /* lg */
}

@media (min-width: 78em) {
  /* xl */
}

html,
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
}
#app,
main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* CUSTOM HELPER CLASSES */
.cg-border {
  @apply rounded-xl border border-(--grey-925-125);
}

.c-bot-disk-a {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--cg-purple);
}
.c-bot-disk-b {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--cg-orange);
}
