/* Republicate — brand stylesheet (single source of truth).
   Lives in design/; symlinked into the app at static/css/republicate.css.
   Accent-over-light: pico's light base kept, accents repainted navy/gold.

   Layer order matters: pico is imported INTO a layer so the brand layer,
   declared after it, wins. Templates must link ONLY this file — an
   unlayered <link> to pico would override the brand layer. */

@layer pico, brand;
@import url("/lib/pico/pico.min.css") layer(pico);

@layer brand {
  :root {
    /* Brand tokens — sampled from the logo */
    --navy:        #052749;
    --navy-raised: #0B3A66;
    --gold:        #B59060;
    --gold-light:  #C39F6C;
    --gold-deep:   #9D7950;
    --steel:       #536E8A;
    --paper:       #F8F4EC;

    /* Accent-over-light: keep pico's light ground, repaint the accent. */
    --pico-primary:                  var(--gold-deep);
    --pico-primary-background:        var(--gold-deep);
    --pico-primary-border:           var(--gold-deep);
    --pico-primary-underline:         color-mix(in srgb, var(--gold-deep) 50%, transparent);
    --pico-primary-hover:             var(--navy);
    --pico-primary-hover-background:  var(--navy);
    --pico-primary-hover-border:      var(--navy);
    --pico-primary-hover-underline:   var(--navy);
    --pico-primary-focus:             color-mix(in srgb, var(--gold) 38%, transparent);
    --pico-primary-inverse:           var(--paper);

    /* Brand presence: headings + nav brand-mark in navy. */
    --pico-h1-color: var(--navy);
    --pico-h2-color: var(--navy);
    --pico-h3-color: var(--navy);
    --pico-h4-color: var(--navy);
    --pico-h5-color: var(--navy);
    --pico-h6-color: var(--navy);
  }
}