/* ═══════════════════════════════════════════════════════════════════
   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 */
  /* The link and accent tone app-wide. Was #4c86b8, which measured 3.88:1
     on white — under WCAG AA for body text, on every link in the app.
     Same hue, darkened until it clears 4.5:1 everywhere it actually
     sits: 5.69 on white, 5.29 on --surface-low, 4.84 on
     --primary-container. */
  --blue-deep: #3a6b91;
  --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 */

  /* ── Ink and Glass ──────────────────────────────────────────────
     Everything below is additive. Nothing above changed, because other
     stylesheets are written against those names.

     Every colour here is the blue, pink, slate or bronze seed mixed with
     white. No new hue enters the app. */

  /* Tonal surfaces. Elevation is tone, not shadow: five even steps toward
     white, each carrying a trace of the blue seed so a stack of them reads
     as depth rather than as five unrelated greys. A card with the right
     tone does not need a border. */
  --surface-lowest: #f0f3f8;   /* the page behind everything */
  --surface-low: #f4f7fb;
  --surface-base: #f9fbfd;     /* the default card */
  --surface-high: #fcfdff;     /* raised above its neighbours */
  --surface-highest: #ffffff;  /* the one thing that matters most */

  /* Text on those surfaces. --muted clears 4.5:1 only from --surface-low
     up, so anything sitting on --surface-lowest uses the variant. */
  --on-surface: #22222a;          /* 14.19:1 on --surface-lowest */
  --on-surface-variant: #5b6472;  /*  5.38:1 on --surface-lowest */

  /* Container roles. Use these for tinted panels instead of hand-mixing a
     wash per component. Each --on-* is verified against its container. */
  --primary-container: #e3eef9;      /* blue seed, 12% over white */
  --on-primary-container: #1f4c70;   /* 7.68:1 */
  --secondary-container: #fbe8ea;    /* pink seed */
  --on-secondary-container: #8a3d45; /* 6.29:1 */
  --tertiary-container: #f7ecdd;     /* bronze seed */
  --on-tertiary-container: #7a4a12;  /* 6.39:1 */

  /* Glass. The hairline is not decoration — without a visible border,
     translucency reads as a rendering fault rather than a material. */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-hairline: rgba(61, 74, 92, 0.16);
  --glass-blur: 16px;
  --glass-shadow: 0 8px 30px rgba(61, 74, 92, 0.10);
  --on-glass: #22222a;            /* 15.06:1 over glass on the mesh */
  --on-glass-variant: #5b6472;    /*  5.71:1 */
  /* A focus ring that disappears into translucency is a broken focus ring.
     6.47:1 against a glass panel over the darkest point of the mesh. */
  --focus-ring: #2b5f88;

  /* Mesh alphas. Low enough that no text behind glass loses contrast. */
  --mesh-blue-a: 0.16;
  --mesh-pink-a: 0.13;
  --mesh-slate-a: 0.06;

  /* Ink. Warm paper, mixed from the bronze seed over white. */
  --paper: #fcf9f5;
  --paper-sunk: #faf3ed;

  /* Motion */
  --ease-emphasised: cubic-bezier(.2, 0, 0, 1);
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --dur-short: 140ms;
  --dur-medium: 240ms;
  --dur-long: 400ms;
}

/* prefers-contrast: more drops the translucency and hardens the hairline
   rather than trying to keep the effect at higher contrast. */
@media (prefers-contrast: more) {
  :root {
    --glass-bg: #ffffff;
    --glass-bg-strong: #ffffff;
    --glass-hairline: rgba(61, 74, 92, 0.4);
    --mesh-blue-a: 0.05;
    --mesh-pink-a: 0.04;
    --mesh-slate-a: 0.02;
  }
}

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