/* ============================================================
   GLOBAL (foundation) — reset, design tokens, base element styles.
   Runs first and does most of the work. The cascade is embraced,
   not avoided, so later layers stay small. (CUBE: the layer below C.)
   ============================================================ */

:root {
  /* fluid type — Utopia clamp() scale, rem-based, 16px browser-default base */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.83rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --text-xl: clamp(1.44rem, 1.3rem + 0.7vw, 1.8rem);
  --text-2xl: clamp(1.73rem, 1.5rem + 1.1vw, 2.4rem);
  --text-3xl: clamp(2.07rem, 1.7rem + 1.8vw, 3.2rem);

  /* fluid space — Utopia clamp() scale */
  --space-xs: clamp(0.5rem, 0.46rem + 0.2vw, 0.625rem);
  --space-sm: clamp(0.75rem, 0.69rem + 0.3vw, 0.95rem);
  --space-base: clamp(1rem, 0.92rem + 0.4vw, 1.25rem);
  --space-lg: clamp(1.5rem, 1.36rem + 0.7vw, 1.95rem);
  --space-xl: clamp(2rem, 1.8rem + 1vw, 2.6rem);
  --space-2xl: clamp(3rem, 2.7rem + 1.5vw, 3.9rem);
  --space-3xl: clamp(4.5rem, 4rem + 2.5vw, 6rem);

  /* semantic colors (wireframe greys) */
  --color-bg: #ffffff;
  --color-surface: #f4f4f5;
  --color-muted: #e4e4e7;
  --color-border: #a1a1aa;
  --color-text: #18181b;
  --color-text-muted: #71717a;
  --color-primary: #3f3f46;
  --color-on-primary: #ffffff;
  --color-danger: #b91c1c;
  --color-danger-surface: #fef2f2;

  --wrapper-max: 70rem;
}

/* --- Andy Bell's modern CSS reset (https://piccalil.li/blog/a-more-modern-css-reset/) --- */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

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

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

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

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

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* --- project base on top of the reset --- */

body {
  margin: 0; /* Andy's reset only clears body's block-end margin; drop the rest. */
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
}

/* role="list" means we've taken the list over — drop its UA indent + margin
   too, not just the bullets Andy's reset removes. */
ul[role="list"],
ol[role="list"] {
  margin: 0;
  padding: 0;
}

/* ============================================================
   C — COMPOSITION : Every Layout primitives.
   Each owns its spacing through its OWN custom property (--stack-space,
   --cluster-space, …) so setting one never bleeds into another. Set it
   inline to deviate (e.g. style="--stack-space: var(--space-lg)"); the
   token default + the cascade handle the common case.
   ============================================================ */

/* Wrapper — center a block, cap its width, pad the gutters. */
.wrapper {
  max-inline-size: var(--wrapper-max);
  margin-inline: auto;
  padding-inline: var(--space-base);
}

/* Stack — vertical flow; --space between children. Owl reads --space on the
   CHILD (direct child only — the `>` is essential, never `.stack *`). */
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.stack > * {
  margin-block: 0;
}
.stack > * + * {
  margin-block-start: var(--space-base);
}
/* whole-stack spacing — the PARENT's class reapplies its children's margin
   directly (no variable read off the child → nested stacks can't collide). */
.stack-xs > * + * { margin-block-start: var(--space-xs); }
.stack-sm > * + * { margin-block-start: var(--space-sm); }
.stack-base > * + * { margin-block-start: var(--space-base); }
.stack-lg > * + * { margin-block-start: var(--space-lg); }
.stack-xl > * + * { margin-block-start: var(--space-xl); }
.stack-2xl > * + * { margin-block-start: var(--space-2xl); }
.stack-3xl > * + * { margin-block-start: var(--space-3xl); }
/* per-item exception (Every Layout): give ONE child different space above +
   below it. Define a NAMED class for it (the name is the API; the margin is
   just today's implementation, free to change). e.g. a `.featured` item:
   .stack > .featured, .stack > .featured + * { margin-block-start: var(--space-2xl); } */

/* Cluster — group items, wrap when out of room; --cluster-space is the gap. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-space, var(--space-base));
}
.cluster-xs { --cluster-space: var(--space-xs); }
.cluster-sm { --cluster-space: var(--space-sm); }
.cluster-base { --cluster-space: var(--space-base); }
.cluster-lg { --cluster-space: var(--space-lg); }
.cluster-xl { --cluster-space: var(--space-xl); }
.cluster-2xl { --cluster-space: var(--space-2xl); }
.cluster-3xl { --cluster-space: var(--space-3xl); }

/* Repel — push two ends apart; --repel-space is the gap once wrapped. */
.repel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--repel-space, var(--space-base));
}
.repel-xs { --repel-space: var(--space-xs); }
.repel-sm { --repel-space: var(--space-sm); }
.repel-base { --repel-space: var(--space-base); }
.repel-lg { --repel-space: var(--space-lg); }
.repel-xl { --repel-space: var(--space-xl); }
.repel-2xl { --repel-space: var(--space-2xl); }
.repel-3xl { --repel-space: var(--space-3xl); }

/* Grid — auto-fit; --grid-space is the gap, --grid-min the min column width. */
.grid {
  display: grid;
  gap: var(--grid-space, var(--space-base));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
}
.grid-xs { --grid-space: var(--space-xs); }
.grid-sm { --grid-space: var(--space-sm); }
.grid-base { --grid-space: var(--space-base); }
.grid-lg { --grid-space: var(--space-lg); }
.grid-xl { --grid-space: var(--space-xl); }
.grid-2xl { --grid-space: var(--space-2xl); }
.grid-3xl { --grid-space: var(--space-3xl); }

/* Switcher — row → column under --threshold; --switcher-space is the gap. */
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-space, var(--space-base));
}
.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--threshold, 30rem) - 100%) * 999);
}
.switcher-xs { --switcher-space: var(--space-xs); }
.switcher-sm { --switcher-space: var(--space-sm); }
.switcher-base { --switcher-space: var(--space-base); }
.switcher-lg { --switcher-space: var(--space-lg); }
.switcher-xl { --switcher-space: var(--space-xl); }
.switcher-2xl { --switcher-space: var(--space-2xl); }
.switcher-3xl { --switcher-space: var(--space-3xl); }

/* Region — vertical section padding; own --region-space so it can't
   leak into descendants' --space. */
.region {
  padding-block: var(--region-space, var(--space-2xl));
}
.region-xs { --region-space: var(--space-xs); }
.region-sm { --region-space: var(--space-sm); }
.region-base { --region-space: var(--space-base); }
.region-lg { --region-space: var(--space-lg); }
.region-xl { --region-space: var(--space-xl); }
.region-2xl { --region-space: var(--space-2xl); }
.region-3xl { --region-space: var(--space-3xl); }

/* Center — cap to a readable --measure and center horizontally. */
.center {
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: var(--measure, 60ch);
}

/* Cover — fill the viewport; center one .cover-target, pin the rest. */
.cover {
  display: flex;
  flex-direction: column;
  min-block-size: 100svh;
  padding: var(--cover-space, var(--space-base));
}
.cover > * {
  margin-block: var(--cover-space, var(--space-base));
}
.cover > :first-child:not(.cover-target) {
  margin-block-start: 0;
}
.cover > :last-child:not(.cover-target) {
  margin-block-end: 0;
}
.cover > .cover-target {
  margin-block: auto;
}
.cover-xs { --cover-space: var(--space-xs); }
.cover-sm { --cover-space: var(--space-sm); }
.cover-base { --cover-space: var(--space-base); }
.cover-lg { --cover-space: var(--space-lg); }
.cover-xl { --cover-space: var(--space-xl); }
.cover-2xl { --cover-space: var(--space-2xl); }
.cover-3xl { --cover-space: var(--space-3xl); }

/* Box — padded, bordered; --padding is its inner space. The transparent
   outline keeps the edge visible in Windows High-Contrast / forced-colors. */
.box {
  padding: var(--padding, var(--space-base));
  border: 1px solid var(--color-border);
  outline: 1px solid transparent;
  outline-offset: -1px;
}

/* ============================================================
   U — UTILITY : single-job classes generated from tokens.
   NOTE: spacing is NOT here — the composition primitives own it
   via custom properties. Utilities are for type, colour, etc.
   ============================================================ */

/* type size */
.text-xs {
  font-size: var(--text-xs);
}
.text-sm {
  font-size: var(--text-sm);
}
.text-base {
  font-size: var(--text-base);
}
.text-lg {
  font-size: var(--text-lg);
}
.text-xl {
  font-size: var(--text-xl);
}
.text-2xl {
  font-size: var(--text-2xl);
}
.text-3xl {
  font-size: var(--text-3xl);
}
.text-center {
  text-align: center;
}

/* color roles */
.bg-surface {
  background: var(--color-surface);
}
.bg-muted {
  background: var(--color-muted);
}
.bg-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.text-muted {
  color: var(--color-text-muted);
}
/* error surface — same colored-box pattern as .bg-primary, paired with .box so
   the border picks up the danger hue too. */
.bg-danger {
  background: var(--color-danger-surface);
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* ============================================================
   B — BLOCK : component-specific styling. Minimal — most work is
   already done by foundation + composition + utility.
   ============================================================ */

.site-header {
  border-block-end: 1px solid var(--color-border);
}
.site-footer {
  border-block-start: 1px solid var(--color-border);
}

/* Auth card — the bounded card on login/signup screens. Caps the .center
   measure to a form-friendly width. */
.auth-card {
  --measure: 22rem;
}

/* ============================================================
   E — EXCEPTION : state-driven deviations only, via data attributes
   ([data-state="…"], [open], :disabled). NOT responsive variants.
   None yet — no stateful components.
   ============================================================ */