/* YSPOT design tokens — see brand/handoff/README.md. Values are final; do not eyeball new ones. */

:root {
  /* Colour */
  --ink: #0B0B0F;
  --ink-2: #14141B;
  --ink-3: #1E1E28;
  --line: #2A2A36;
  --paper: #F4F4EE;
  --muted: #8A8A9A;
  --lime: #C6FF3D;
  --lime-active: #A8DC2A;
  --coral: #FF5C4D;
  --electric: #4D6BFF;
  --sun: #FFD84D;

  --chip-hover: #25252F;
  --cost-on-lime: rgba(11, 11, 15, .14);
  --cost-on-electric: rgba(11, 11, 15, .28);
  --pick-wash: rgba(198, 255, 61, .10);

  /* Type */
  --f-display: "Archivo Expanded", "Archivo", system-ui, sans-serif;
  --f-head: "Archivo", system-ui, sans-serif;
  --f-body: "Space Grotesk", system-ui, sans-serif;

  /* Shape — 4px corner grid */
  --r-pill: 999px;
  --r-card: 16px;
  --r-input: 12px;
  --r-check: 6px;
  --r-badge: 8px;
  --bw: 2px;

  /* Placeholder knobs (see "Placeholder imagery" in the handoff) */
  --blob-blur: 10px;
  --blob-alpha: .42;
}

/* Dot grid — the texture on every empty area. */
.dots { background-image: radial-gradient(var(--ink-2) 1px, transparent 1px); background-size: 24px 24px; }
.dots-lg { background-image: radial-gradient(#191922 1px, transparent 1px); background-size: 24px 24px; }
.dots-sm { background-image: radial-gradient(var(--ink-2) 1px, transparent 1px); background-size: 18px 18px; }
.dots-26 { background-image: radial-gradient(var(--ink-2) 1px, transparent 1px); background-size: 26px 26px; }