/* RepGarden website.
   Colours are the tokens decided on 28 October 2026 (docs/brand/colours.css): four Tailwind scales, nothing custom.
   Type: Rubik Black for the wordmark and headings, Figtree for everything else. */

:root {
  --rg-page: #FAFAF9;        /* stone-50 */
  --rg-card: #FFFFFF;
  --rg-line: #E7E5E4;        /* stone-200 */
  --rg-text: #292524;        /* stone-800 */
  --rg-muted: #79716B;       /* stone-500 */
  --rg-primary: #008236;     /* green-700 */
  --rg-on-primary: #FFFFFF;
  --rg-link: #008236;        /* green-700 */
  --rg-tint: #DCFCE7;        /* green-100 */
  --rg-tint-text: #016630;   /* green-800 */
  --rg-carrot: #FF6900;      /* orange-500 */
  --rg-carrot-tint: #FFEDD4; /* orange-100 */
  --rg-carrot-text: #9F2D00; /* orange-800 */
  --rg-gold: #FFB900;        /* amber-400 */
  --rg-on-gold: #0C0A09;     /* stone-950 */
  --rg-danger: #E7000B;      /* red-600 */
  --rg-rest: #E7E5E4;        /* stone-200: a rest day on the grid */
  --rg-missed: #D6D3D1;      /* stone-300: a missed session */
  --rg-future: #FAFAF9;

  --font-display: "Rubik", system-ui, sans-serif;
  --font-text: "Figtree", system-ui, sans-serif;
  --radius: 1.25rem;
  --gutter: 1rem;

  color-scheme: light dark;
}

/* Dark mode is its own palette, not an inversion. It applies when the system asks for it and the visitor has not chosen Light,
   or when the visitor has chosen Dark (theme.js sets data-theme). */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rg-page: #0C0A09;        /* stone-950, never black */
    --rg-card: #1C1917;        /* stone-900 */
    --rg-line: #292524;        /* stone-800 */
    --rg-text: #F5F5F4;        /* stone-100 */
    --rg-muted: #A6A09B;       /* stone-400 */
    --rg-primary: #00C950;     /* green-500 */
    --rg-on-primary: #0C0A09;  /* stone-950 */
    --rg-link: #05DF72;        /* green-400 */
    --rg-tint: #032E15;        /* green-950 */
    --rg-tint-text: #7BF1A8;   /* green-300 */
    --rg-carrot: #FF8904;      /* orange-400 */
    --rg-carrot-tint: #441306; /* orange-950 */
    --rg-carrot-text: #FFB86A; /* orange-300 */
    --rg-gold: #FFB900;        /* amber-400 */
    --rg-on-gold: #0C0A09;
    --rg-danger: #FF6467;      /* red-400 */
    --rg-rest: #292524;        /* stone-800 */
    --rg-missed: #44403C;      /* stone-700 */
    --rg-future: #1C1917;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
    --rg-page: #0C0A09;        /* stone-950, never black */
    --rg-card: #1C1917;        /* stone-900 */
    --rg-line: #292524;        /* stone-800 */
    --rg-text: #F5F5F4;        /* stone-100 */
    --rg-muted: #A6A09B;       /* stone-400 */
    --rg-primary: #00C950;     /* green-500 */
    --rg-on-primary: #0C0A09;  /* stone-950 */
    --rg-link: #05DF72;        /* green-400 */
    --rg-tint: #032E15;        /* green-950 */
    --rg-tint-text: #7BF1A8;   /* green-300 */
    --rg-carrot: #FF8904;      /* orange-400 */
    --rg-carrot-tint: #441306; /* orange-950 */
    --rg-carrot-text: #FFB86A; /* orange-300 */
    --rg-gold: #FFB900;        /* amber-400 */
    --rg-on-gold: #0C0A09;
    --rg-danger: #FF6467;      /* red-400 */
    --rg-rest: #292524;        /* stone-800 */
    --rg-missed: #44403C;      /* stone-700 */
    --rg-future: #1C1917;
  color-scheme: dark;
}

:root[data-theme="light"] { color-scheme: light; }

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--rg-page);
  color: var(--rg-text);
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.55;
}

img { max-width: 100%; height: auto; }

a {
  color: var(--rg-link);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

:focus-visible {
  outline: 3px solid var(--rg-primary);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.1;
  margin: 0;
}

h2 {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.25rem);
  letter-spacing: -0.02em;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

p, li { max-width: 62ch; }

strong { font-weight: 600; }

.wrap {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 40rem) {
  :root { --gutter: 1.5rem; }
}

/* Skip link: off screen until it has focus */

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--rg-card);
  color: var(--rg-text);
  border: 2px solid var(--rg-primary);
  border-radius: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}

.skip:focus { top: 1rem; }

/* Small lockup at the top of the inner pages */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  color: var(--rg-text);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -0.035em;
}

.brand img { width: 2.25rem; height: 2.25rem; }

/* The hero */

.hero { padding-block: 2.5rem 3.5rem; }

.hero-grid {
  display: grid;
  gap: 1.5rem;
}

.hero-art img {
  display: block;
  width: 100%;
  max-width: 12rem;
  margin-inline: auto;
}

.wordmark {
  font-size: clamp(3rem, 2rem + 5vw, 4.75rem);
  letter-spacing: -0.035em;
  line-height: 1;
}

.what {
  margin: 1rem 0 0;
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.35;
  max-width: 30ch;
}

.different {
  margin: 0.85rem 0 0;
  font-size: 1.125rem;
  max-width: 44ch;
}

@media (min-width: 56rem) {
  .hero { padding-block: 3.5rem 4.5rem; }
  .hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 3rem;
  }
  .hero-art { order: 2; }
  .hero-art img { max-width: 26rem; }
}

/* The waiting-list form */

.signup {
  position: relative;
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--rg-card);
  border: 1px solid var(--rg-line);
  border-radius: var(--radius);
  max-width: 30rem;
}

.signup .corner {
  position: absolute;
  top: -1.4rem;
  right: 1.1rem;
  width: 3.5rem;
  height: 3.5rem;
}

.signup-title {
  font-size: 1.25rem;
  line-height: 1.25;
  padding-right: 3.5rem;
}

.hp { display: none; }

.field { margin-top: 1.1rem; }

.field label,
.field legend {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.field input[type="email"] {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 0.85rem;
  font: inherit;
  color: var(--rg-text);
  background: var(--rg-page);
  border: 1.5px solid var(--rg-muted); /* stone-500: a control boundary needs 3:1 against the card */
  border-radius: 0.75rem;
}

.field input[type="email"]:focus-visible {
  outline-offset: 0;
  border-color: var(--rg-primary);
}

fieldset.field {
  margin-inline: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

fieldset.field legend { padding: 0; }

.choice {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.75rem;
  padding: 0.25rem 0;
  font-weight: 400;
  margin-bottom: 0;
  cursor: pointer;
}

.choice input {
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  flex: none;
  accent-color: var(--rg-primary);
}

.signup button {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  padding: 0.9rem 1.5rem;
  font: inherit;
  font-weight: 600;
  color: var(--rg-on-primary);
  background: var(--rg-primary);
  border: 0;
  border-radius: 0.9rem;
  cursor: pointer;
}

.signup button:hover { filter: brightness(1.08); }

.consent {
  margin: 0.9rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--rg-muted);
}

/* Sections */

.section { padding-block: 2.5rem; }

.section h2::before {
  content: "";
  display: block;
  width: 3rem;
  height: 0.3rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: var(--rg-carrot);
}

.section h2 { margin-bottom: 1.5rem; }

@media (min-width: 56rem) {
  .section { padding-block: 3.5rem; }
}

/* How a week works: three steps */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

.steps li {
  max-width: none;
  padding: 1.5rem;
  background: var(--rg-card);
  border: 1px solid var(--rg-line);
  border-radius: var(--radius);
}

.steps img {
  /* the three illustrations differ slightly in height, so each sits in the same box, bottom-left */
  display: block;
  width: 7.5rem;
  height: 7.5rem;
  object-fit: contain;
  object-position: left bottom;
  margin-bottom: 1rem;
}

.steps h3 { margin-bottom: 0.6rem; }

.steps p { margin: 0; }

@media (min-width: 56rem) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .steps img { width: 9rem; height: 9rem; }
}

/* For trainers and for clients */

.two {
  display: grid;
  gap: 1.25rem;
}

.card {
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--rg-line);
  background: var(--rg-card);
}

.card ul {
  margin: 0;
  padding-left: 1.2rem;
}

.card li { margin-top: 0.6rem; }

.card li::marker { color: var(--rg-primary); }

.card p:last-child { margin-bottom: 0; }

@media (min-width: 56rem) {
  .two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .card { padding: 2rem; }
}

/* Questions */

.qa h3 { margin-top: 1.5rem; }

.qa h3:first-of-type { margin-top: 0; }

.qa p { margin: 0.4rem 0 0; }

/* Inner pages: the privacy notice and the thanks page */

.page {
  max-width: 44rem;
  padding-block: 2rem 4rem;
}

.page h1 {
  font-size: clamp(2rem, 1.5rem + 2.5vw, 2.75rem);
  letter-spacing: -0.025em;
  margin-top: 2rem;
}

.page .dated {
  color: var(--rg-muted);
  margin-top: 0.75rem;
}

.page h2 {
  font-size: 1.375rem;
  margin-top: 2rem;
}

.page p, .page ul { margin: 0.75rem 0 0; }

.page ul { padding-left: 1.2rem; }

.page li { margin-top: 0.35rem; }

.page li::marker { color: var(--rg-primary); }

.thanks { padding-block: 2rem 5rem; }

.thanks .big {
  font-size: 1.25rem;
  margin-top: 1rem;
}

/* Footer */

.footer {
  margin-top: 2rem;
  padding-block: 2rem 3rem;
  border-top: 1px solid var(--rg-line);
  font-size: 0.9375rem;
  color: var(--rg-muted);
}

.footer p { margin: 0; }

.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 0.75rem;
}

.footer a { color: var(--rg-text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* The top bar: the small lockup and the appearance control */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
}

.topbar .brand { margin-top: 0; }

/* The light/dark toggle: a pill with the sun on the left and the moon on the right; the knob covers the mode in use */

.theme-toggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 4.25rem;
  height: 2.25rem;
  padding: 0;
  background: var(--rg-card);
  border: 1px solid var(--rg-line);
  border-radius: 999px;
  cursor: pointer;
  color: var(--rg-muted);
}

.theme-toggle svg { width: 1.1rem; height: 1.1rem; display: block; margin-inline: auto; }

.theme-toggle .sun, .theme-toggle .moon { position: relative; z-index: 1; transition: color 150ms; }

.theme-toggle[aria-pressed="false"] .sun, .theme-toggle[aria-pressed="true"] .moon { color: var(--rg-on-primary); }

.theme-toggle .knob {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: calc(50% - 0.2rem);
  height: calc(100% - 0.4rem);
  border-radius: 999px;
  background: var(--rg-primary);
  transition: transform 180ms ease;
}

.theme-toggle[aria-pressed="true"] .knob { transform: translateX(100%); }

.footer .theme-toggle { margin-top: 1rem; }

/* How a week works: four steps, two by two on a wide screen */

@media (min-width: 56rem) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps img { width: 10rem; height: 10rem; }
}

.steps .who {
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  background: var(--rg-carrot-tint);
  color: var(--rg-carrot-text);
  font-size: 0.875rem;
  font-weight: 600;
}

/* The month as a grid: one square a day, coloured by what grew */

.month {
  margin: 1.5rem 0 0;
  padding: 1.5rem;
  background: var(--rg-card);
  border: 1px solid var(--rg-line);
  border-radius: var(--radius);
  display: grid;
  gap: 1.25rem;
}

.month .days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.4rem;
  max-width: 22rem;
}

.month .days span {
  aspect-ratio: 1;
  border-radius: 0.5rem;
  background: var(--rg-rest);
}

.month .days .rest { background: repeating-linear-gradient(45deg, var(--rg-rest) 0 4px, var(--rg-line) 4px 7px); }
.month .days .missed { background: var(--rg-missed); }
.month .days .gold { background: var(--rg-gold); position: relative; }
.month .days .gold::after { content: "\2605"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.9rem; color: var(--rg-on-gold); }
.month .days .beetroot { background: #6D0056; }
.month .days .beetroot.pale { background: #AD7F9D; }
.month .days .broccoli { background: #287C42; }
.month .days .broccoli.pale { background: #90B296; }
.month .days .squash { background: #FEAB94; }
.month .days .squash.pale { background: #F4CDC2; }

.month figcaption { margin: 0; }

@media (min-width: 56rem) {
  .month { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: center; gap: 2.5rem; padding: 2rem; }
}