@import url("./_tokens.css");
@import url("./_misc.css");
@import url("./_layout.css");

@import url("./ui.toast.css");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
}

html {
  scroll-behavior: smooth;
}

@layer light-mode;

body {
  font: var(--font-body-md);
  color: var(--color-on-background);
  background-color: var(--color-background);
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  padding: var(--spacing-12);
}

body > [layout="main"],body > #youcan-section--header,body > #youcan-section--footer {
    width: 100%;
  }

body > [layout="main"] {
    flex: 2;
    display: flex;
    gap: var(--spacing-12);
    flex-direction: column;
  }

body [theme="neutral"] {
    --color-on-theme: var(--color-background);
    --color-theme: var(--color-on-background);
  }

/* LIGHT */

body[data-theme-mode="light"] [theme="primary-low"] {
      --color-on-theme: var(--color-on-primary-container);
      --color-theme: var(--color-primary-container);
    }

body[data-theme-mode="light"] [theme="primary-high"] {
      --color-on-theme: var(--color-on-primary);
      --color-theme: var(--color-primary);
    }

/* DARK */

@layer dark-mode;

:is(body[data-theme-mode="dark"],body:has(ui-theme > input:checked)) [data-invert] {
      filter: invert(1);
    }

:is(body[data-theme-mode="dark"],body:has(ui-theme > input:checked)) [theme="primary-low"] {
      --color-on-theme: var(--color-on-primary);
      --color-theme: var(--color-primary);
    }

:is(body[data-theme-mode="dark"],body:has(ui-theme > input:checked)) [theme="primary-high"] {
      --color-on-theme: var(--color-on-primary-container);
      --color-theme: var(--color-primary-container);
    }

ul {
  list-style: none;
}

.section-head {
  text-align: center;
  padding: var(--spacing-16);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-container-low);
}

.section-head h2 {
    font: var(--font-title-md);
  }