/* =============================================================================
   First Crack — site (firstcrack.com.br)

   ---------------------------------------------------------------------------
   THE TOKENS AND THE BASE BELOW ARE COPIED VERBATIM FROM THE FIRMWARE

     ../firstcrack/main/www/style.css

   The firmware is the source. The equipment's interface and this site have to
   read as one product, and the way that stays true is that nobody edits a token
   here — a colour, a step of the space scale or a type size that diverges is the
   failure this comment exists to prevent. If a token has to change, it changes
   in the firmware first and is copied down.

   What is NOT copied is layer 2 onward: card, field, switch, chip, the roast
   chart, the LCD readouts. Those are the vocabulary of an instrument panel and a
   marketing page uses almost none of it. The site's own layer is at the bottom
   of this file and is built only out of the tokens above it.

   Single light theme, like the firmware. The firmware's reason does not apply
   here (it is about captive-portal webviews and a roastery floor) — the reason
   here is simply that two themes is a second design to keep true, and the
   product does not have one yet.
   ========================================================================== */

/* ===========================================================================
   LAYER 0 — TOKENS  (verbatim from the firmware)
   ======================================================================== */
:root {
  /* --- Colour ------------------------------------------------------------ */
  --bg:        #faf8f6;   /* warm off-white, faint amber bias (picked, not #fff) */
  --surface:   #ffffff;
  --surface-2: #faf7f4;   /* recessed: plaques, inset panels, commit bands */
  --ink:       #1c1917;   /* warm near-black */
  --ink-2:     #44403c;   /* labels, secondary headings */
  --muted:     #78716c;
  --faint:     #a8a29e;
  --line:      #ece7e1;   /* warm hairline */
  /* Artisan's convention, not our palette: the BT curve. It sits here so the CSS
     can refer to it without a second copy of the hex. */
  --bt:        #0a5c90;
  /* The product mark's ink: the brown of the logo artwork itself. Not a UI colour —
     nothing else may use it, or it becomes a second accent competing with --ember. */
  --roast:     #431f12;
  --line-2:    #dcd5cd;   /* control borders */
  --ember:     #d97706;   /* roast accent */
  --ember-d:   #b45309;
  --ember-t:   #fff7ed;   /* selected tint */
  --ok:        #15803d;
  --ok-d:      #166534;
  --danger:    #dc2626;
  --danger-d:  #b91c1c;
  --danger-t:  #fdeeee;
  --danger-l:  #f3c9c9;
  --focus:     rgba(217,119,6,.22);
  --pill:      #f2ede8;   /* neutral pill ground */

  /* --- Space — 4px base -------------------------------------------------- */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;

  /* --- Type -------------------------------------------------------------- */
  --fs-1: .72rem;    /* eyebrow, tag, footer readouts */
  --fs-2: .8rem;     /* hint, meta, description */
  --fs-3: .875rem;   /* field label, secondary body */
  --fs-4: .95rem;    /* body, inputs, buttons */
  --fs-5: 1.05rem;   /* card title */
  --fs-6: 1.3rem;    /* page title */
  --fs-7: 2.1rem;    /* secondary instrument reading (ET) */
  --fs-8: 4rem;      /* primary instrument reading (BT) */
  --track: .09em;    /* letter-spacing for uppercase micro-labels */

  /* --- Radius ------------------------------------------------------------ */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-pill: 999px;

  /* --- Elevation --------------------------------------------------------- */
  --sh-1: 0 1px 2px #0000000d, 0 1px 3px #0000000f;
  --sh-2: 0 2px 4px #0000000d, 0 8px 20px #00000012;
  /* --sh-1 cast upward, for chrome anchored to the bottom of the viewport. */
  --sh-up: 0 -1px 2px #0000000d, 0 -1px 3px #0000000f;
}

/* ===========================================================================
   LAYER 1 — BASE  (verbatim from the firmware)
   ======================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink); background: var(--bg);
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}
h1 { font-size: var(--fs-6); font-weight: 700; margin: 0; letter-spacing: -.015em; }
h2 { font-size: var(--fs-5); font-weight: 650; margin: 0; letter-spacing: -.005em; }
label { font-size: var(--fs-3); font-weight: 600; color: var(--ink-2); }
[hidden] { display: none !important; }

/* ===========================================================================
   LAYER 2 — SITE
   The only layer that is ours. Everything here is expressed in the tokens
   above; no literal colour, spacing or radius belongs in this file.
   ======================================================================== */

/* --- Shell --------------------------------------------------------------- */
.wrap {
  max-width: 62rem;
  margin: 0 auto;
  padding-inline: var(--s4);
}

/* --- Top bar --------------------------------------------------------------
   The firmware's app bar is a control surface with live state in it. This one
   only carries identity, so it is the same two ingredients (mark, wordmark) on
   the same hairline and nothing else. */
.bar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.bar-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 3.5rem;
}
/* An inline SVG with only a viewBox falls back to 300x150 — it MUST be sized
   here. Same trap the firmware documents beside icoMark. */
.mark {
  width: 2rem;
  height: 2rem;
  flex: none;
  color: var(--roast);
}
.wordmark {
  font-size: var(--fs-5);
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* --- Eyebrow — the uppercase micro-label, same idea as the firmware's ----- */
.eyebrow {
  display: block;
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ember-d);
}

/* --- Hero -----------------------------------------------------------------
   h1 is redefined rather than using --fs-6: that step is 1.3rem, sized for a
   card title on a 128x64 panel's sibling screen. A landing page headline is a
   different job, so it gets a display size that still scales off the same
   rhythm. */
.hero {
  padding-block: var(--s7) var(--s6);
}
.hero h1 {
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  max-width: 16ch;
  margin-block: var(--s3) var(--s4);
}
.lede {
  font-size: var(--fs-5);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
  margin: 0;
}

/* --- Actions --------------------------------------------------------------
   A pared-down .btn: the firmware's carries loading spinners, block/ghost
   variants and a confirm state that this page has no use for. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s5);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s5);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: var(--fs-4);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: var(--ember);
  color: #fff;
  box-shadow: var(--sh-1);
}
.btn:hover { background: var(--ember-d); }
.btn.ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-2);
  box-shadow: none;
}
.btn.ghost:hover { background: var(--surface-2); }
.btn:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

/* --- Footer -------------------------------------------------------------- */
.foot {
  margin-top: var(--s7);
  border-top: 1px solid var(--line);
  padding-block: var(--s5);
  font-size: var(--fs-2);
  color: var(--muted);
}
.foot a { color: var(--ink-2); }
.foot p { margin: 0 0 var(--s1); }

/* --- Error page ---------------------------------------------------------- */
.mid {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}