/* ===========================================================================
   boulder.vote — Color System
   A warm, earthy, WPA-poster palette. Six campaign "colorways", each a
   grounded backdrop paired with a warm paper cream and one hot accent.
   Nostalgic yet modern; hand-painted, sun-faded, human.
   =========================================================================== */

:root {
  /* --- Core brand hues (the six signage colorways) --------------------- */
  --brick:      #ab331d;  /* rust red — primary campaign accent           */
  --teal:       #436366;  /* faded chalkboard teal                        */
  --ochre:      #bc7231;  /* amber / burnt sign paint                     */
  --forest:     #1e3124;  /* deep flatiron pine                           */
  --ink:        #22313a;  /* midnight slate navy (near-black)             */
  --sand:       #d7c0a3;  /* kraft / sun-faded canvas                     */

  /* --- Paper + neutrals ----------------------------------------------- */
  --paper:      #f0e6d2;  /* warm cream — the "ink" that prints on darks  */
  --paper-dim:  #e2d4ba;  /* muted cream for secondary text on darks      */
  --canvas:     #f6efe0;  /* lightest background sheet                    */
  --newsprint:  #ece2cd;  /* subtle raised surface on light               */

  /* --- Tints / shades for states -------------------------------------- */
  --brick-deep:   #8f2816;
  --brick-soft:   #c0472b;
  --teal-deep:    #35504f;
  --ochre-deep:   #9e5c22;
  --forest-deep:  #16261c;
  --ink-deep:     #18242b;

  /* --- Hairlines + shadow --------------------------------------------- */
  --line-on-light: rgba(34, 49, 58, 0.16);
  --line-on-dark:  rgba(240, 230, 210, 0.22);
  --shade:         rgba(24, 36, 43, 0.20);
  --shade-strong:  rgba(24, 36, 43, 0.34);

  /* ====================================================================
     SEMANTIC ALIASES — default (light "paper") context
     Flip these with a colorway scope (see below) for dark signage.
     ==================================================================== */
  --bg-page:       var(--canvas);
  --bg-surface:    var(--paper);
  --bg-raised:     var(--newsprint);
  --bg-sunk:       var(--sand);

  --text-strong:   var(--ink);
  --text-body:     #2c3b44;
  --text-muted:    #5c6b6d;
  --text-inverse:  var(--paper);

  --accent:        var(--brick);
  --accent-hover:  var(--brick-deep);
  --accent-text:   var(--paper);

  --border:        var(--line-on-light);
  --border-strong: rgba(34, 49, 58, 0.32);

  --focus-ring:    var(--ochre);
}

/* ======================================================================
   COLORWAYS — apply to any container to recolor its subtree.
   Each sets a grounded --bg + cream text + one accent, matching a
   signage panel. Use on hero sections, cards, full signs.
   ====================================================================== */

[data-colorway="brick"] {
  --bg-page: var(--brick); --bg-surface: var(--brick); --bg-raised: var(--brick-deep);
  --text-strong: var(--paper); --text-body: var(--paper); --text-muted: var(--paper-dim);
  --accent: var(--paper); --accent-hover: var(--paper-dim); --accent-text: var(--brick);
  --border: var(--line-on-dark); --border-strong: rgba(240,230,210,0.4);
  --focus-ring: var(--sand);
  color: var(--paper); background: var(--brick);
}
[data-colorway="teal"] {
  --bg-page: var(--teal); --bg-surface: var(--teal); --bg-raised: var(--teal-deep);
  --text-strong: var(--paper); --text-body: var(--paper); --text-muted: var(--paper-dim);
  --accent: var(--sand); --accent-hover: var(--paper); --accent-text: var(--teal-deep);
  --border: var(--line-on-dark); --border-strong: rgba(240,230,210,0.4);
  --focus-ring: var(--sand);
  color: var(--paper); background: var(--teal);
}
[data-colorway="ochre"] {
  --bg-page: var(--ochre); --bg-surface: var(--ochre); --bg-raised: var(--ochre-deep);
  --text-strong: var(--ink); --text-body: var(--ink); --text-muted: rgba(34,49,58,0.7);
  --accent: var(--ink); --accent-hover: var(--ink-deep); --accent-text: var(--paper);
  --border: rgba(34,49,58,0.28); --border-strong: rgba(34,49,58,0.5);
  --focus-ring: var(--ink);
  color: var(--ink); background: var(--ochre);
}
[data-colorway="forest"] {
  --bg-page: var(--forest); --bg-surface: var(--forest); --bg-raised: var(--forest-deep);
  --text-strong: var(--paper); --text-body: var(--paper); --text-muted: var(--paper-dim);
  --accent: var(--brick-soft); --accent-hover: var(--brick); --accent-text: var(--paper);
  --border: var(--line-on-dark); --border-strong: rgba(240,230,210,0.4);
  --focus-ring: var(--sand);
  color: var(--paper); background: var(--forest);
}
[data-colorway="ink"] {
  --bg-page: var(--ink); --bg-surface: var(--ink); --bg-raised: var(--ink-deep);
  --text-strong: var(--paper); --text-body: var(--paper); --text-muted: var(--paper-dim);
  --accent: var(--sand); --accent-hover: var(--paper); --accent-text: var(--ink);
  --border: var(--line-on-dark); --border-strong: rgba(240,230,210,0.4);
  --focus-ring: var(--ochre);
  color: var(--paper); background: var(--ink);
}
[data-colorway="sand"] {
  --bg-page: var(--sand); --bg-surface: var(--sand); --bg-raised: var(--newsprint);
  --text-strong: var(--forest); --text-body: #2c3b44; --text-muted: #6b6752;
  --accent: var(--brick); --accent-hover: var(--brick-deep); --accent-text: var(--paper);
  --border: rgba(34,49,58,0.2); --border-strong: rgba(34,49,58,0.4);
  --focus-ring: var(--brick);
  color: var(--forest); background: var(--sand);
}