/* ═══════════════════════════════════════════════════════════════════
   Learnings — app theme

   Mobile first. Every rule below is written for a narrow screen, and
   `min-width` queries add complexity as the viewport grows. There is not a
   single `max-width` query in this file — if it looks right on a phone it
   stays right on a laptop, not the other way round.

   Palette: light blue and pink on warm off-white. No purple. Light only.
   Components follow Ákotí tokens — mud-brick radius, engraved inset
   shadows, Outfit body / Fraunces display.

   No build step, no CDN for behaviour.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ink: #22222a;
  --slate: #3d4a5c;          /* deepest tone, for text and solid pills */
  --blue: #7fb2dd;           /* light blue — the primary accent */
  --blue-deep: #4c86b8;      /* same hue, contrast-safe on white */
  --blue-wash: #eaf3fb;
  --pink: #e8b4b8;           /* light pink — the secondary accent */
  --pink-deep: #c4757c;
  --pink-wash: #fdf0f1;
  --bronze: #cd7f32;

  --bg: #f8f9fb;
  --surface: #ffffff;
  --surface-2: #f4f7fa;
  --line: rgba(61, 74, 92, 0.14);
  --line-soft: rgba(61, 74, 92, 0.07);

  --muted: #67707e;
  --faint: #98a1ae;

  --ok: #2f8f76;
  --warn: #c07f2e;
  --alert: #c25b66;

  /* Semantic washes, derived from the three tones above so a success and an
     error can never read as the same tile. No new hues introduced. */
  --ok-wash: #eff7f4;
  --warn-wash: #fdf5ea;
  --alert-wash: #fdeff0;

  /* Ákotí geometry */
  --brick: 20px 7px 20px 7px;
  --brick-flip: 7px 20px 7px 20px;
  --brick-sm: 13px 5px 13px 5px;
  --brick-sm-flip: 5px 13px 5px 13px;
  --engrave: inset 0 2px 6px rgba(0, 0, 0, 0.045);

  --font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  --shell: 1180px;
  --gap: 12px;
  --tap: 44px;               /* minimum comfortable touch target */
}

@media (min-width: 700px) {
  :root {
    --brick: 24px 8px 24px 8px;
    --brick-flip: 8px 24px 8px 24px;
    --gap: 14px;
  }
}