@reference "./typography.css";
@reference "@maggioli-design-system/design-tokens/dist/css/tailwind-theme-typography.css";

@layer base {
  @view-transition {
    navigation: var(--magma-view-transition-navigation, auto);
  }

  html {
    transition-duration: 200ms;
    transition-timing-function: var(--ease-out);
  }

  body {
    @apply font-info
      text-info-detail;

    background-color: rgb(var(--tone-neutral));
    color: rgb(var(--tone-neutral-03));
  }

  :root.pref-contrast-high body {
    color: rgb(var(--tone-neutral-01));
  }

  @media (prefers-contrast: more) {
    :root.pref-contrast-system body {
      color: rgb(var(--tone-neutral-01));
    }
  }

  :root.pref-theme-scheme-dark {
    color-scheme: only dark;
  }

  :root.pref-theme-scheme-light {
    color-scheme: only light;
  }

  :root.pref-theme-scheme-all {
    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    :root.pref-theme-system {
      color-scheme: dark;
    }
  }

  :root.pref-theme-scheme-all.pref-theme-dark {
    color-scheme: dark;
  }

  ::selection {
    background-color: var(--magma-selection-background);
    color: var(--magma-selection-color);
  }

  button,
  optgroup,
  select {
    @apply text-title-action;
  }

  b,
  strong {
    @apply font-semibold
      tracking-tight;
  }

  a {
    color: rgb(var(--theme-default-02-primary-text));
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply max-w-title;
  }

  p {
    @apply max-w-title;
  }

  .hydrated {
    /*
      Revert all styles for hydrated web components
      to avoid tailwind base unwanted overrides
      all: revert-layer;
    */
    border: revert-layer;
    display: revert-layer;
    margin: revert-layer;
    padding: revert-layer;
  }
}