/* Con Map design tokens: blister-card pegboard world.
   Dark scheme is the default; the light scheme follows the system preference. */

@font-face {
  font-family: "Barlow Condensed";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow-condensed-800.woff2") format("woff2");
}

:root {
  color-scheme: dark light;

  /* Pegboard (page ground) */
  --board: #0e3a44;
  --board-hole: #082a32;
  --board-hole-lit: rgba(255, 255, 255, 0.07);
  --on-board: #f2f8f9;
  --on-board-muted: #a9c4cb;
  --board-line: rgba(242, 248, 249, 0.22);

  /* Card stock and ink */
  --card: #f7f9fa;
  --card-edge: #d3dde1;
  --ink: #10202a;
  --ink-muted: #46596a;
  --ink-line: rgba(16, 32, 42, 0.16);

  /* Status seals (each always paired with a glyph and a word) */
  --status-open: #14804a;
  --status-open-tint: #8fd2ae;
  --status-closed: #c23a1c;
  --status-closed-tint: #f0a993;
  --status-reported-open: var(--status-open);
  --status-reported-closed: var(--status-closed);
  --on-seal: #ffffff;

  /* Interaction */
  --focus: #8ef0ff;
  --danger: #c23a1c;

  /* Type */
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-display: 2.25rem;
  --track-display: 0.01em;

  /* Space (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --gutter: 1rem;
  --page-max: 34rem;
  --tap: 3rem;

  /* Shape and depth */
  --radius-card: 0.875rem;
  --radius-bubble: 1rem;
  --radius-field: 0.625rem;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 12px 20px -10px rgba(0, 0, 0, 0.55), 0 2px 5px rgba(0, 0, 0, 0.3);
  --shadow-raised: 0 8px 16px -8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --press-duration: 180ms;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --board: #d3dee1;
    --board-hole: #b6c6ca;
    --board-hole-lit: rgba(255, 255, 255, 0.55);
    --on-board: #10202a;
    --on-board-muted: #2f4552;
    --board-line: rgba(16, 32, 42, 0.28);
    --card: #ffffff;
    --card-edge: #c3d0d5;
    --focus: #005f73;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 12px 18px -10px rgba(16, 32, 42, 0.4), 0 2px 4px rgba(16, 32, 42, 0.22);
  }
}

:root[data-theme="light"] {
  --board: #d3dee1;
  --board-hole: #b6c6ca;
  --board-hole-lit: rgba(255, 255, 255, 0.55);
  --on-board: #10202a;
  --on-board-muted: #2f4552;
  --board-line: rgba(16, 32, 42, 0.28);
  --card: #ffffff;
  --card-edge: #c3d0d5;
  --focus: #005f73;
}