/* Yeast on East — shared web styles.
   Tokens mirror Sources/SourdoughUI/Theme/Theme.swift exactly. Do not invent
   values here; if a colour is missing, add the token in Swift first. */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --paper: #FFF8F1;
  --paper-raised: #FFFFFF;
  --ink: #3B2E2A;
  --ink-2: #6F5C53;
  --signal: #E8484E;
  --signal-deep: #B5301F;
  --proof: #A85E2A;
  --proof-deep: #985324;
  --sunken: #FFF0E6;
  --on-signal: #FFFFFF;
  --hairline: #E8D5CC;
  --rule: #3B2E2A;

  --serif: "Instrument Serif", "Hoefler Text", Georgia, serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* Dark tokens live in one place and are applied by an explicit attribute.
   The site defaults to light rather than following the OS, so the toggle is
   the only thing that decides — a media query as well would mean the button
   disagrees with the page on a dark-mode device. */
:root[data-theme="dark"] {
  --paper: #1A1512;
  --paper-raised: #211C17;
  --ink: #F2E9DC;
  --ink-2: #A8998A;
  --signal: #E8705C;
  --signal-deep: #F08A78;
  --proof: #D08A4A;
  --proof-deep: #C98244;
  --sunken: #2A231D;
  --on-signal: #1A1512;
  --hairline: rgba(242, 233, 220, .17);
  --rule: #F2E9DC;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 40rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }

/* Serif for display, never for body. Radius 0 everywhere: the app has no
   rounded corners and structure comes from 2px rules. */
h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 9vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
}

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  margin: 2.75rem 0 0.75rem;
}

h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.2rem;
  margin: 1.85rem 0 0.35rem;
}

p { margin: 0 0 1rem; }
ul { margin: 0 0 1rem; padding-left: 1.15rem; }
li { margin-bottom: 0.5rem; }
a { color: var(--signal-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }

code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--sunken);
  padding: 0.1em 0.35em;
}

/* Mono + uppercase + tracking. Half a style on its own; always together. */
.kicker {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 2rem;
}

.rule { border: 0; border-top: 2px solid var(--rule); margin: 2rem 0; }
.lede { font-size: 1.2rem; line-height: 1.5; }

.card {
  background: var(--paper-raised);
  border: 2px solid var(--rule);
  padding: 1.25rem;
  margin: 1.5rem 0;
}
.card p:last-child { margin-bottom: 0; }

.card-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.5rem;
}

/* Coral is rationed to a single primary action per view. */
.cta {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-signal);
  background: var(--signal-deep);
  padding: 0.95rem 1.75rem;
  text-decoration: none;
}

/* Shade toggle — a segmented pair, the same construction as the app's own
   Light/Dark/System control: mono caps, 2px frame, radius 0, no shadow. */
.shade {
  display: inline-flex;
  border: 2px solid var(--rule);
  margin: 0 0 2rem;
}

.shade button {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  line-height: 1;
}

.shade button + button { border-left: 2px solid var(--rule); }

.shade button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.foot {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.foot a { color: var(--ink-2); }