/* CSS Document */
@layer reset, theme, layout, components, utilities;

/* 1. Reset & variables (si présents) */
/* 2. Typo globale et fondations */
/* 3. Layout (header, footer, grid...) */
/* 4. Sections thématiques (coffee, flour, oil...) */
/* 5. Composants : nav, accordion, button, card... */
/* 6. Utilitaires (helpers, mixins CSS...) */

@layer utilities {
  .padding-sm {
    padding: 0.5rem;
  }

  .padding-lg {
    padding: 0.8rem;
  }
}

@layer framework {
  @layer layout {
  }
}
@layer framework.layout {
	html {
		/* optimization: */
		/* tell page you arent transitioning the whole page */
		view-transition-name: none;
		color-scheme: dark light;
	}
	body {
		min-block-size: 100%; 
	}
  /* allow interrupting the view transition with mouse */
  ::view-transition {
    pointer-events: none;
  }
}

@layer special {
  .item {
    color: rebeccapurple;
  }
}

@layer base {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
  }
}