/* E32 default colours: peacock + saffron (chosen by Praveen, Oct 28 2026).
   Peacock blues are sampled from wwwBFF public/brand/logo.png:
   #000079 (peacock blue), #434379 (peacock indigo), #000045 (peacock navy).
   Saffron #f0c14b is the secondary colour. "derived" marks new tints made for this palette.
   ?theme=teal shows the previous BFF teal for comparison; ?theme=peacock-cool swaps the cream for a cool off-white. */

html:not([data-theme="teal"]) {
  --ink: #000079;          /* logo blue: headings, primary buttons, step numbers */
  --ink-deep: #000045;     /* logo navy: header bar, footer, install panel, primary hover */
  --text: #1c1c3a;         /* derived: navy-tinted near-black */
  --muted: #4a4a68;        /* derived: greyed indigo */
  --link: #434379;         /* logo indigo */
  --link-hover: #000079;
  --saffron: #f0c14b;      /* secondary: CTAs, rules, nav underline, badges on navy, footer accent */
  --saffron-ink: #6d4700;  /* dark saffron for saffron-coloured text on light backgrounds (7.3:1 on cream) */
  --saffron-deep: #c89212; /* saffron border on light backgrounds */
  --focus: #6d4700;
  --on-ink: #ffffff;
  --on-ink-soft: #d9d9f0;  /* derived pale peacock */
  --nav-sub: #c7c7e6;      /* derived pale peacock */
  --header-bg: rgb(0 0 69 / 97%);
  --shadow: 0 16px 40px rgb(0 0 69 / 9%);
  --field-border: #8d8db3; /* derived: 3.2:1 on white */
}

/* Cool off-white background option (not chosen; kept for comparison) */
html[data-theme="peacock-cool"] {
  --paper: #f4f5fa; --paper-2: #fcfcff; --line: #d9d9ea; --todo-bg: #ececf7;
}

/* Navy navigation bar with white lettering; the light peacock (logo option B) sits directly on navy.
   ?theme=teal keeps the cream header and the original peacock in its round badge. */
html:not([data-theme="teal"]) .site-header { border-bottom: 3px solid var(--saffron); }
html:not([data-theme="teal"]) .brand,
html:not([data-theme="teal"]) .brand-name,
html:not([data-theme="teal"]) .nav-list a { color: var(--on-ink); }
html:not([data-theme="teal"]) .brand small { color: var(--nav-sub); }
html:not([data-theme="teal"]) .brand .mark { width: auto; height: 3rem; border: 0; border-radius: 0; background: none; overflow: visible; }
html:not([data-theme="teal"]) .brand .mark .logo-original { display: none; }
html:not([data-theme="teal"]) .brand .mark .logo-light { display: block; width: auto; height: 3rem; }
html:not([data-theme="teal"]) .nav-list a[aria-current=page],
html:not([data-theme="teal"]) .nav-list a:not(.nav-cta):hover { text-decoration: underline 3px var(--saffron); text-underline-offset: .45rem; }
html:not([data-theme="teal"]) .site-header :focus-visible { outline-color: var(--saffron); }

/* Saffron secondary buttons: saffron outline, fills saffron on hover */
html:not([data-theme="teal"]) .button.secondary { border-color: var(--saffron-deep); color: var(--ink); background: transparent; }
html:not([data-theme="teal"]) .button.secondary:hover { background: var(--saffron); border-color: var(--saffron-deep); color: var(--donate-text); }

/* Highlight rules and dividers */
html:not([data-theme="teal"]) .section > h2::after { content: ""; display: block; width: 3rem; height: 3px; margin-top: .45rem; background: var(--saffron); border-radius: 2px; }
html:not([data-theme="teal"]) .feature + .feature { border-top: 2px solid var(--saffron); }
html:not([data-theme="teal"]) .note { border-left-color: var(--saffron); }
html:not([data-theme="teal"]) .picker label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 -4px 0 var(--saffron), var(--shadow); }

/* Badges on navy */
.badge-saffron { display: inline-block; background: var(--saffron); color: var(--ink-deep); font: 700 .78rem/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; padding: .1rem .6rem; border-radius: var(--radius-pill); }
html:not([data-theme="teal"]) .flash-panel { background: var(--ink-deep); border-top: 4px solid var(--saffron); }

/* Footer accent */
html:not([data-theme="teal"]) .site-footer { border-top: 4px solid var(--saffron); }
html:not([data-theme="teal"]) .site-footer h3 { color: var(--saffron); }
html:not([data-theme="teal"]) .site-footer a:hover { color: var(--saffron); }