/* TIDEPOOL: a sunny beach. Warm sand ground, deep sea-green ink, and one lifebuoy red that means
   "the action, and the reigning champion". Everything is outlined in ink, like a hand-drawn sticker. */
:root {
  color-scheme: light;

  /* the beach, lightest to darkest */
  --bg: #f6edda;
  --bg-2: #efe2c6;
  --surface: #fffaf0;
  --surface-2: #f8efdb;

  --line: rgba(19, 52, 59, 0.14);
  --line-2: rgba(19, 52, 59, 0.28);

  --ink: #13343b;
  --ink-2: #3c585d;
  --muted: #6b807e;

  /* lifebuoy red: the main action, the headline's second beat, and the reigning champion. Nothing else. */
  --accent: #e8442a;
  --on-accent: #fff8ef;

  --good: #1f7f55;
  --bad: #a8473c;
  --warn: #9a6512;

  /* the pool's own materials */
  --water: #8ad6cf;
  --water-2: #46b1b2;
  --water-3: #23808b;
  --rock: #a8a193;
  --rock-2: #847e71;
  --moss: #93b45c;
  --sand: #ecd8ab;
  --sand-2: #d8bd86;
  --wood: #c0915b;

  --font-display: "Bricolage Grotesque", "Arial Rounded MT Bold", ui-sans-serif, system-ui, sans-serif;
  --font-text: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.035em;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --r-pill: 999px;
  --border: 2px solid var(--ink);
  --shadow: 4px 4px 0 var(--ink); /* the sticker's hard shadow */

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 140ms;
  --t: 280ms;

  --wrap: 1200px;
  --gut: clamp(16px, 4vw, 40px);
  --top-h: 68px;
}