:root {
  /* surfaces */
  --paper: #f3f2ec;
  --paper-2: #ebe9e0;
  --card: #fffdf7;
  --ink: #0e0e10;
  --ink-2: #3a3a40;
  --ink-3: #7a7a82;
  --line: #0e0e10;
  --dot: rgba(14, 14, 16, 0.32);
  --dim: rgba(243, 242, 236, 0.72);

  /* punk neons */
  --acid: #e4ff2e;
  --hot: #ff2e88;
  --cyan: #22e1ff;
  --violet: #7b2eff;
  --orange: #ff6b1a;
  --lime: #8cff3a;
  --blue: #2e6bff;
  --red: #ff3b2e;

  /* post-it paper */
  --pi-yellow: #ffe45c;
  --pi-pink: #ff9acb;
  --pi-cyan: #8ff0ff;
  --pi-lime: #c6ff5c;
  --pi-lilac: #cdb6ff;
  --pi-orange: #ffb070;

  /* counsel pane tint (co-pilot ref) */
  --counsel-bg: #f3ecff;
  --counsel-ink: #5a1fd6;

  /* type */
  --f-display: "Instrument Serif", "Times New Roman", serif;
  --f-sans: "Space Grotesk", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --f-marker: "Permanent Marker", "Marker Felt", cursive;

  /* shape */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;
  --bw: 2px;
  --shadow-hard: 4px 4px 0 var(--ink);
  --shadow-hard-sm: 2px 2px 0 var(--ink);
  --shadow-soft: 0 10px 30px rgba(14, 14, 16, 0.14);
  --shadow-postit: 0 1px 1px rgba(0,0,0,.12), 0 6px 14px -4px rgba(0,0,0,.25);

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* shell metrics (v4 contract, see ARCHITECTURE.md "v4 responsive"):
     --topbar-h  full height of the top bar, including the notch inset
     --nav-h     height of the phone/tablet bottom nav incl. the home-indicator inset; 0px on desktop
     Anything fixed to the bottom on phone/tablet sits at bottom: calc(var(--nav-h) + 12px) or higher. */
  --topbar-h: calc(64px + env(safe-area-inset-top, 0px));
  --filterbar-h: 52px;
  --bnav-base: 62px;
  --nav-h: 0px;

  color-scheme: light;
}
@media (max-width: 1024px) {
  :root { --nav-h: calc(var(--bnav-base) + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 700px) {
  :root { --topbar-h: calc(56px + env(safe-area-inset-top, 0px)); --filterbar-h: 54px; }
}

/* ===== global polish ===== */
/* one keyboard focus ring everywhere: 3px hot-pink outline, 2px offset.
   Text-entry fields keep their own hard-shadow focus treatment; tabindex=-1 targets
   (headings focused programmatically on open) never show a ring. */
:root { --ring: #ff2e88; }
:where(a[href], button, summary, select, iframe, label,
  [role="button"], [role="tab"], [role="radio"], [role="option"], [role="menuitem"], [role="switch"],
  [tabindex]:not([tabindex="-1"]),
  input[type="checkbox"], input[type="radio"], input[type="range"]):focus-visible {
  outline: 3px solid var(--ring) !important;
  outline-offset: 2px !important;
}
[tabindex="-1"]:focus { outline: none; }

/* text selection */
::selection { background: var(--acid); color: #0e0e10; }

/* reduced motion: kill springs, wobbles and slides app-wide but keep end states */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}