/* TOPFISH: a pixel aquarium at night. Deep-water ground, foam-white ink, steel tank frames, and one crown gold that
   means "the action, and the crowned creature". Every edge is a pixel edge: square corners notched by one step. */
:root {
  color-scheme: dark;

  /* the room the tank stands in, darkest to lightest */
  --bg: #0b1726;
  --bg-2: #0f1e31;
  --surface: #13263d;
  --surface-2: #1a3150;

  --line: rgba(190, 228, 255, 0.12);
  --line-2: rgba(190, 228, 255, 0.24);

  --ink: #eef8ff;
  --ink-2: #b9cddc;
  --muted: #8aa1b3;

  /* the tank's steel frame, and the near-black of every pixel outline and hard shadow */
  --frame: #2f5378;
  --frame-2: #4a77a3;
  --edge: #050c16;

  /* crown gold: the main action, the headline's second beat, and the crowned creature. Nothing else. */
  --accent: #ffc83d;
  --accent-2: #d48a1c;
  --on-accent: #1d1302;

  --good: #5fd38d;
  --bad: #ff7a6b;
  --warn: #f2a65a;

  /* the tank's own materials (kept in step with web/js/tankart.mjs) */
  --water: #1f6a96;
  --water-2: #195a83;
  --water-3: #144a6e;
  --sand: #d9b77a;
  --kelp: #3fae6e;

  --font-display: "Pixelify Sans", "Courier New", ui-monospace, monospace;
  --font-text: "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --display-weight: 700;
  --display-tracking: 0;

  /* no round corners anywhere: the pixel notch does that job */
  --r-sm: 0;
  --r: 0;
  --r-lg: 0;
  --r-pill: 0;
  --step: 4px;
  --notch: polygon(var(--step) 0, calc(100% - var(--step)) 0, calc(100% - var(--step)) var(--step), 100% var(--step), 100% calc(100% - var(--step)), calc(100% - var(--step)) calc(100% - var(--step)), calc(100% - var(--step)) 100%, var(--step) 100%, var(--step) calc(100% - var(--step)), 0 calc(100% - var(--step)), 0 var(--step), var(--step) var(--step));
  --border: 3px solid var(--frame);
  --shadow: none;

  --ease: steps(4, end);
  --ease-soft: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 120ms;
  --t: 240ms;

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