/*
 * Repeat design system. Plain CSS, served by Propshaft; every file in this
 * folder is linked. Cascade layers fix the order regardless of file order.
 */
@layer reset, tokens, base, layout, components, pages, utilities;

@font-face {
  font-family: "Nunito";
  src: url("/assets/nunito-latin-wght-normal-8d9cc785.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/bricolage-grotesque-latin-wght-normal-3084aa15.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

@layer tokens {
  :root {
    /* Palette. Peach, Sunny and Mint are surfaces only; text sits in ink on top. */
    --leaf: #2e6651;
    --leaf-strong: #234f3e;
    --leaf-soft: #e1ede7;
    --cream: #fbf7ef;
    --surface: #fffdf9;
    --peach: #f5b8a8;
    --peach-soft: #fce6df;
    --sunny: #f2c75c;
    --sunny-soft: #fbefc8;
    --mint: #b8dad1;
    --mint-soft: #e3f0ec;
    --ink: #2b2a27;
    --muted: #6b665d;
    --line: #e9e1d2;
    --line-strong: #d8cdb9;
    --field-border: #958c7c; /* 3:1 against surface, for form control edges */
    --danger: #a3402e;
    --danger-soft: #f8e1dc;

    --font-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
    --font-ui: "Nunito", "Avenir Next", system-ui, sans-serif;

    /* Type scale, ratio 1.25 from 16px. */
    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5625rem;
    --text-2xl: 1.953rem;
    --text-3xl: 2.441rem;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    --radius-pill: 999px;
    --radius-lg: 22px;
    --radius-md: 14px;

    --touch: 44px;
    --column: 720px;
    --shadow-float: 0 1px 0 rgb(43 42 39 / 0.04), 0 10px 30px -14px rgb(35 79 62 / 0.45);
    --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  img, svg { display: block; max-width: 100%; }
  input, button, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  p, h1, h2, h3 { overflow-wrap: break-word; }
}

@layer base {
  html { background: var(--cream); }

  body {
    min-height: 100dvh;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-md);
    line-height: 1.5;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-lg); }
  h3 { font-size: var(--text-md); }

  p { text-wrap: pretty; }

  a { color: var(--leaf); text-underline-offset: 0.2em; }

  :focus-visible {
    outline: 3px solid var(--leaf);
    outline-offset: 2px;
  }

  ::selection { background: var(--sunny-soft); }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .muted { color: var(--muted); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}