/* Silicon Valley County design tokens. Light is primary; dark is "night over the Bay".
   Every color in the site goes through these tokens. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Public+Sans:ital,wght@0,400..700;1,400&display=swap');

:root {
  color-scheme: light;
  --font-display: 'Bricolage Grotesque', 'Public Sans', system-ui, sans-serif;
  --font-body: 'Public Sans', system-ui, sans-serif;

  /* Base palette */
  --fog: #eaf0f3;
  --fog-deep: #d9e4ea;
  --ink: #15232e;
  --ink-soft: #445664;
  --redwood: #2e6a4e;
  --bay: #3a7ca5;
  --poppy: #e98a2b;
  --on-poppy: #1d1206;

  /* Surfaces */
  --bg: var(--fog);
  --bg-glow-a: #cfe3ee;
  --bg-glow-b: #e3efe6;
  --contour: rgba(46, 106, 78, 0.12);
  --glass: rgba(255, 255, 255, 0.52);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.9);
  --glass-rim: rgba(21, 35, 46, 0.08);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 -1px 0 rgba(21, 35, 46, 0.04) inset, 0 18px 40px -18px rgba(28, 58, 78, 0.28);
  --glass-blur: blur(22px) saturate(170%);
  --veil: rgba(21, 35, 46, 0.35);
  --focus: #1f6fd1;

  /* Map */
  --map-land: #f6f9fa;
  --map-water: #c9dfea;
  --map-county-line: rgba(21, 35, 46, 0.28);
  --map-outline: #15232e;
  --map-context: #e1e8ec;
  --map-label: #15232e;
  --map-label-halo: rgba(246, 249, 250, 0.9);

  /* Fifteen community colors + unincorporated, tuned for both grounds */
  --c-1: #7fb7a0; --c-2: #8fb3d9; --c-3: #e7b56f; --c-4: #b8a3d6; --c-5: #e99a8b;
  --c-6: #9ccf7e; --c-7: #78c2c9; --c-8: #d9a3c2; --c-9: #c9c178; --c-10: #93a7e0;
  --c-11: #f0a960; --c-12: #a7c7b5; --c-13: #d8b096; --c-14: #8cc4e6; --c-15: #c2a07c;
  --c-uninc: #dfe9e0;
  --c-uninc-hatch: rgba(46, 106, 78, 0.22);

  /* Data vis ramp (sequential, light → dark) */
  --seq-0: #e8f1ec; --seq-1: #bfdccb; --seq-2: #8dc0a6; --seq-3: #5a9e80; --seq-4: #2e6a4e;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --duration: 240ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Dark tokens: applied by explicit choice or by system preference when no choice is stored */
:root[data-theme="dark"] {
  color-scheme: dark;
  --fog: #0f1b23; --fog-deep: #0a141a;
  --ink: #e6eef2; --ink-soft: #a9bac5;
  --redwood: #7fc4a0; --bay: #7db5d8; --poppy: #f5a25a; --on-poppy: #1d1206;
  --bg: #0e1920; --bg-glow-a: #12324a; --bg-glow-b: #143226;
  --contour: rgba(127, 196, 160, 0.10);
  --glass: rgba(24, 40, 52, 0.48); --glass-strong: rgba(24, 40, 52, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.14); --glass-rim: rgba(255, 255, 255, 0.06);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, 0 -1px 0 rgba(0, 0, 0, 0.25) inset, 0 22px 50px -20px rgba(0, 0, 0, 0.7);
  --veil: rgba(3, 8, 12, 0.6); --focus: #8cc4ff;
  --map-land: #16252f; --map-water: #0b141a; --map-county-line: rgba(230, 238, 242, 0.22);
  --map-outline: #e6eef2; --map-context: #1b2b35; --map-label: #e6eef2; --map-label-halo: rgba(14, 25, 32, 0.9);
  --c-1: #3f7f66; --c-2: #4a6f98; --c-3: #9a7437; --c-4: #6f5c94; --c-5: #9a5a4e;
  --c-6: #5b8a40; --c-7: #3a7d84; --c-8: #8e5c7a; --c-9: #82793a; --c-10: #4f619c;
  --c-11: #a5682b; --c-12: #4f7563; --c-13: #8e6a54; --c-14: #3f7ba0; --c-15: #7a5d40;
  --c-uninc: #1f3329; --c-uninc-hatch: rgba(127, 196, 160, 0.22);
  --seq-0: #18302a; --seq-1: #24503f; --seq-2: #357558; --seq-3: #57a07c; --seq-4: #9ad6b6;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --fog: #0f1b23; --fog-deep: #0a141a;
    --ink: #e6eef2; --ink-soft: #a9bac5;
    --redwood: #7fc4a0; --bay: #7db5d8; --poppy: #f5a25a; --on-poppy: #1d1206;
    --bg: #0e1920; --bg-glow-a: #12324a; --bg-glow-b: #143226;
    --contour: rgba(127, 196, 160, 0.10);
    --glass: rgba(24, 40, 52, 0.48); --glass-strong: rgba(24, 40, 52, 0.72);
    --glass-edge: rgba(255, 255, 255, 0.14); --glass-rim: rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, 0 -1px 0 rgba(0, 0, 0, 0.25) inset, 0 22px 50px -20px rgba(0, 0, 0, 0.7);
    --veil: rgba(3, 8, 12, 0.6); --focus: #8cc4ff;
    --map-land: #16252f; --map-water: #0b141a; --map-county-line: rgba(230, 238, 242, 0.22);
    --map-outline: #e6eef2; --map-context: #1b2b35; --map-label: #e6eef2; --map-label-halo: rgba(14, 25, 32, 0.9);
    --c-1: #3f7f66; --c-2: #4a6f98; --c-3: #9a7437; --c-4: #6f5c94; --c-5: #9a5a4e;
    --c-6: #5b8a40; --c-7: #3a7d84; --c-8: #8e5c7a; --c-9: #82793a; --c-10: #4f619c;
    --c-11: #a5682b; --c-12: #4f7563; --c-13: #8e6a54; --c-14: #3f7ba0; --c-15: #7a5d40;
    --c-uninc: #1f3329; --c-uninc-hatch: rgba(127, 196, 160, 0.22);
    --seq-0: #18302a; --seq-1: #24503f; --seq-2: #357558; --seq-3: #57a07c; --seq-4: #9ad6b6;
  }
}

/* Shared glass primitive */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-rim);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-lg);
  position: relative;
}
.glass::before {
  /* specular rim: brighter along the top-left edge, like light through a lens */
  content: '';
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 1px;
  background: linear-gradient(140deg, var(--glass-edge), transparent 38%, transparent 70%, var(--glass-edge));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}