/* ============================================================
   DONNIE HAMMONDS PLUMBING: design tokens, "Copper and Water"
   Deep well-water blue-black, copper as the only accent, water
   light moving across the hero. Titus, Alabama.
   ============================================================ */

:root {
  color-scheme: dark;

  /* --- Ground --- */
  --well: #08111a;         /* page */
  --well-2: #0c1620;       /* alternate section */
  --basin: #111d29;        /* panels */
  --basin-2: #162533;      /* raised panels, inputs */

  /* --- Copper: the one accent --- */
  --copper: #c8783c;
  --copper-2: #e4985d;     /* polished edge */
  --copper-dim: rgba(200, 120, 60, 0.16);
  --copper-glow: rgba(200, 120, 60, 0.5);

  /* --- Water: material, used only where water literally appears --- */
  --water: #5fb3c9;
  --water-deep: #2a6f84;

  /* --- Ink on dark --- */
  --text-hi: #ffffff;
  --text: #ece7dd;
  --text-soft: #d6d1c6;
  --text-2: #a7b2bd;
  --text-3: #76828e;
  --line: rgba(236, 231, 221, 0.10);
  --line-2: rgba(236, 231, 221, 0.20);
  --err: #ff9f7a;
  --err-2: #ffb899;
  --scroll: #22313f;
  --scroll-2: #34465a;

  /* --- Type --- */
  --f-display: "Familjen Grotesk", "Helvetica Neue", Helvetica, sans-serif;
  --f-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Type ramp, px at 16 root. Every font-size in main.css is one of these. */
  --t-2xs: 0.6875rem;
  --t-xs: 0.75rem;
  --t-s: 0.8125rem;
  --t-sm: 0.875rem;
  --t-m: 0.9375rem;
  --t-r: 1rem;
  --t-base: 1.0625rem;
  --t-md: 1.1875rem;
  --t-lg: 1.5rem;
  --t-xl: 2rem;
  --t-h3: clamp(1.5rem, 2.6vw, 2rem);
  --t-2xl: clamp(2.25rem, 4.6vw, 3.5rem);
  --t-3xl: clamp(2.75rem, 6.2vw, 5.25rem);
  --t-quote: clamp(1.375rem, 2.6vw, 2rem);

  /* --- Space (4px base) --- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;
  --s-4: 1rem;     --s-5: 1.5rem;  --s-6: 2rem;
  --s-7: 3rem;     --s-8: 4rem;    --s-9: 6rem;
  --s-10: 8rem;

  --shell: 1240px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius: 10px;
  --radius-s: 6px;
  --nav-h: 76px;
  --nav-h-m: 64px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-mech: cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast: 140ms;
  --d-base: 280ms;
  --d-slow: 600ms;
}