/*
  Reset
*/

/* 1. More intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Prevent font size inflation */
html {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* 3. Remove default margin */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin: 0;
}

/* 4. Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* 5. Set shorter line heights */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}


/* 6. Remove list styles on ul, ol elements with a list role */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* 7. Remove markers and spacing from elements with a list role and a class */
[role='list'][class] {
  list-style: none;
  margin-block: 0;
  padding: 0
}

/* 8. Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* 9. Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/*
  Core (design-opinionated) global styles
*/

/* 1. Set design tokens using custom properties */
:root {
  --color-light: #eceaea;
  --color-dark: #0b3a4e;
  --color-primary: #ee088a;  
  --font-base: system-ui, sans-serif;
}

/* 2. Apply color and font tokens */
body {
  background-color: var(--color-light);
  color: var(--color-dark);
  font-family: var(--font-base);
}

/* 3. Set default heading line measure to improve readability */
h1, h2, h3, h4 {
  max-width: 34ch;
}

/* 4. Set default line measure to improve readability */
p,
li {
  max-width: 70ch;
}

/* 5. Apply link default color and decoration styles */
a {
  color: var(--color-dark);
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: .25ex;
}

/* 6. Apply visually different hover and focus state styles */
a:hover,
a:focus {
  text-decoration: line-through;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: .25ex;
}

/* 7. Hide focus styles if they're not needed, for example, 
when an element receives focus via the mouse. */
:focus:not(:focus-visible) {
  outline: none;
}

/* 8. Show focus styles on keyboard focus. */
:focus-visible {
  outline: 2px dotted var(--color-dark);
  outline-offset: 3px;
}

/*
Compositions
*/

/* Apply a margin to direct sibling elements */ 
.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

/* Create flex items which cluster inline, until space no longer permits. At this point, items begin to wrap and display in block. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--cluster-column-gap, 1rem);
  row-gap: var(--cluster-row-gap, .25rem);
  justify-content: var(--cluster-horizontal-alignment, flex-start);
  align-items: var(--cluster-vertical-alignment, center);
}

/* Add consistent vertical padding between sections of content */
.region {
  padding-block-start: var(--region-padding-block-start, 2rem);
  padding-block-end: var(--region-padding-block-end, 2rem);
}

/* Position content horizontally center in the viewport */
.wrapper {
  width: 95vw;
  width: clamp(16rem,var(--wrapper-max-width, 95vw), 48rem);
  margin-inline: auto;
  padding-inline: 1rem;
} 

/* When space permits, add as much inline space as possibe between two grid items, so that 100% of the inline space has been filled */
.repel {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--repel-column-gap, 1rem);
  row-gap: var(--repel-row-gap, .25rem);
  justify-content: space-between;
  align-items: var(--repel-vertical-alignment, center);
}