/* CivicNest production color tokens. Historical palette explorations live in docs/design/samples.
   Keep storefront color values here so every component follows the selected theme. */
:root {
  --primary: #254e62;
  --primary-deep: #173543;
  --secondary: #416779;
  --text: #142227;
  --muted: #58666c;
  --ground: #ffffff;
  --surface-2: #f5f7f8;
  --rule: #dbe2e5;
  --line: #dbe2e5;
  --control-line: #819198;
  --tint: #edf3f5;
  --action: #16333d;
  --action-text: #ffffff;
  --action-hover: #244d5b;
  --focus-ring: #254e62;
  --danger: #b23836;
  --surface: #ffffff;
  --plate: #f3f7f7;
  --on-plate: #142227;
  --mark-box: #173b48;
  --mark-glyph: #ffffff;
  --brand-a: #173b48;
  --brand-b: #173b48;
  --scrim: rgba(20, 34, 39, 0.35);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #acccd7;
    --primary-deep: #bddbe4;
    --secondary: #a1bfca;
    --text: #edf3f4;
    --muted: #adbdc3;
    --ground: #101719;
    --surface-2: #1b282d;
    --rule: #33484f;
    --line: #33484f;
    --control-line: #738991;
    --tint: #20353e;
    --action: #d0e7df;
    --action-text: #12342b;
    --action-hover: #b6dacf;
    --focus-ring: #d0e7df;
    --danger: #f1978f;
    --surface: #162125;
    --plate: #1b2b31;
    --on-plate: #edf3f4;
    --mark-box: #acccd7;
    --mark-glyph: #173b48;
    --brand-a: #edf3f4;
    --brand-b: #edf3f4;
    --scrim: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --primary: #acccd7;
  --primary-deep: #bddbe4;
  --secondary: #a1bfca;
  --text: #edf3f4;
  --muted: #adbdc3;
  --ground: #101719;
  --surface-2: #1b282d;
  --rule: #33484f;
  --line: #33484f;
  --control-line: #738991;
  --tint: #20353e;
  --action: #d0e7df;
  --action-text: #12342b;
  --action-hover: #b6dacf;
  --focus-ring: #d0e7df;
  --danger: #f1978f;
  --surface: #162125;
  --plate: #1b2b31;
  --on-plate: #edf3f4;
  --mark-box: #acccd7;
  --mark-glyph: #173b48;
  --brand-a: #edf3f4;
  --brand-b: #edf3f4;
  --scrim: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}
