/* AfterTheTone app theme — the "Tone" palette from the landing redesign
   (design/landing_tone/README.md), under the token names the app pages have
   always used so each page's own layout CSS keeps working. Served at /app.css
   (routes/static.ts); the landing pages carry their own copy inline. */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url("/fonts/IBMPlexSans-Regular.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url("/fonts/IBMPlexSans-Medium.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url("/fonts/IBMPlexSans-SemiBold.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Sans";font-weight:700;font-display:swap;src:url("/fonts/IBMPlexSans-Bold.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url("/fonts/IBMPlexMono-Medium.ttf") format("truetype")}

:root {
  /* Surfaces: warm paper, cards a touch lighter, inset blocks a touch darker */
  --bg: #f4f1ea;
  --panel: #fffdf8;
  --panel-2: #ece8df;
  --border: #dcd6c9;
  --line: #e8e3d8;

  /* Ink */
  --text: #1b1a17;
  --ink: #1b1a17;
  --muted: #625d55;

  /* Petrol teal accent — links, active tab, focus, glyph; never a surface */
  --accent: #0b7285;
  --accent-hover: #095e6e;
  --accent-text: #0b6478;
  --accent-soft: #d9eef2;
  --accent-on-ink: #5cc8dc;

  /* Status: a readable text colour and a soft fill for pills and banners */
  --ok: #15803d;
  --ok-soft: #dcfce7;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --danger: #b91c1c;
  --danger-soft: #fee2e2;
  --info: #1d4ed8;
  --info-soft: #dbeafe;

  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

html { -webkit-font-smoothing: antialiased; color-scheme: light; }
body { font-family: "IBM Plex Sans", system-ui, sans-serif; }
a { color: var(--accent-text); }
a:hover { color: #084b5a; }
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}

/* The tone-wave glyph: four bars, 40/100/65/30 % tall. */
.tone { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; vertical-align: -1px; }
.tone b { display: block; width: 3px; border-radius: 2px; background: var(--accent); }
.tone b:nth-child(1) { height: 40%; }
.tone b:nth-child(2) { height: 100%; }
.tone b:nth-child(3) { height: 65%; }
.tone b:nth-child(4) { height: 30%; }

/* Brand lock-up used by the nav and the sign-in cards. */
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text);
  font-weight: 600; font-size: 17px; letter-spacing: -.3px; text-decoration: none; }
.brand:hover { color: var(--text); }
.brand .tone { height: 18px; }
.brand .tone b { width: 3.5px; }