/* ================================================================
   NPAV Accent-Color Themes
   ----------------------------------------------------------------
   The site stays dark-only. This file swaps only the brand ACCENT
   color (primary CTA, active nav, links, focus rings, selected
   states) — never backgrounds, surfaces, typography, or semantic
   success/warning/danger colors.

   Mechanism: html[data-accent="..."] overrides the two brand-green
   levers that everything else derives from:
     - --npav-green-primary / --npav-green-dark   (npav-critical.css,
       consumed across npav-critical/deferred/2026-home + the many
       --color-primary-* / --color-green-aXX-700 tokens in
       npav-tokens.css that are color-mix()-derived from it)
     - the body.npav-dark accent sub-group in npav-2026-dark.css
       (--d-accent / --d-accent-deep / --d-accent-soft /
       --d-accent-glow / --d-price / --d-border-bright / --d-grad),
       which is a literal palette, not var()-derived, so it needs an
       explicit override per accent here.

   Deliberately NOT touched by any rule below: --d-green (success
   ticks), --color-success, --d-bg/--d-surface/--d-text/--d-muted*,
   and the --d-krypton/--d-blue/--d-orange/--d-red stat-category
   icon colors (those are fixed category signals, not the brand
   accent).

   Green is the default and needs no override block — it is already
   the literal value declared in npav-critical.css / npav-2026-dark.css.
   Loaded LAST (after npav-2026-dark.css) so these overrides win by
   source order.
   ================================================================ */

/* Restrained, desaturated dark-UI accent palette — deliberately NOT
   neon/notification-bright. Orange here is a brand ACCENT choice, not
   a warning color; semantic warning/danger/success tokens are untouched. */
html[data-accent="blue"] {
    --npav-green-primary: #4c8dff;
    --npav-green-dark: #3a6fd1;
    /* Renewal page's own CTA/focus/link lever (--nr-*, npav-critical.css) */
    --nr-green: #4c8dff;
    --nr-green-dark: #3a6fd1;
    --nr-green-glow: rgba(76, 141, 255, .15);
}
html[data-accent="purple"] {
    --npav-green-primary: #9b7de8;
    --npav-green-dark: #7c64ba;
    --nr-green: #9b7de8;
    --nr-green-dark: #7c64ba;
    --nr-green-glow: rgba(155, 125, 232, .15);
}
html[data-accent="orange"] {
    --npav-green-primary: #f09a4a;
    --npav-green-dark: #c07b3b;
    --nr-green: #f09a4a;
    --nr-green-dark: #c07b3b;
    --nr-green-glow: rgba(240, 154, 74, .15);
}

html[data-accent="blue"] body.npav-dark {
    --d-accent:         #4c8dff;
    --d-blue-deep:      #3a6fd1;
    --d-accent-deep:    #3a6fd1;
    --d-accent-soft:    rgba(76, 141, 255, 0.12);
    --d-accent-glow:    rgba(76, 141, 255, 0.16);
    --d-price:          #679eff;
    --d-border-bright:  rgba(76, 141, 255, 0.32);
    --d-grad:           linear-gradient(135deg, #4c8dff, #3a6fd1);
}
html[data-accent="purple"] body.npav-dark {
    --d-accent:         #9b7de8;
    --d-blue-deep:      #7c64ba;
    --d-accent-deep:    #7c64ba;
    --d-accent-soft:    rgba(155, 125, 232, 0.12);
    --d-accent-glow:    rgba(155, 125, 232, 0.16);
    --d-price:          #aa91eb;
    --d-border-bright:  rgba(155, 125, 232, 0.32);
    --d-grad:           linear-gradient(135deg, #9b7de8, #7c64ba);
}
html[data-accent="orange"] body.npav-dark {
    --d-accent:         #f09a4a;
    --d-blue-deep:      #c07b3b;
    --d-accent-deep:    #c07b3b;
    --d-accent-soft:    rgba(240, 154, 74, 0.12);
    --d-accent-glow:    rgba(240, 154, 74, 0.16);
    --d-price:          #f2a965;
    --d-border-bright:  rgba(240, 154, 74, 0.32);
    --d-grad:           linear-gradient(135deg, #f09a4a, #c07b3b);
}

/* buynow page (body.npav-dark-buynow) has its own --bn-* token set,
   independent of --d-accent — --bn-green is its accent lever (active
   tab border/icon, badge, buttons). --bn-orange (discount tag) and
   --bn-success are left alone: semantic, not brand accent. */
html[data-accent="blue"] body.npav-dark-buynow   { --bn-green: #4c8dff; }
html[data-accent="purple"] body.npav-dark-buynow { --bn-green: #9b7de8; }
html[data-accent="orange"] body.npav-dark-buynow { --bn-green: #f09a4a; }

/* ---------------------------------------------------------------
   Accent Color selector — small swatch row in the footer.
   Visual only: dot swatches showing each theme's actual color,
   with a ring indicating the current selection. No layout impact
   beyond the row itself.
   --------------------------------------------------------------- */
.npav-accent-picker {
    display: flex;
    align-items: center;
    gap: var(--space-3, 8px);
    flex-wrap: wrap;
}
.npav-accent-picker__label {
    font-size: var(--font-size-sm, 14px);
    color: var(--d-muted, #8c9bb8);
}
.npav-accent-swatch {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    /* subtle neutral border only — no color cast when unselected */
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.28) inset;
    transition: box-shadow 0.15s ease, filter 0.15s ease;
}
.npav-accent-swatch:hover {
    filter: brightness(1.12);
}
.npav-accent-swatch:focus-visible {
    outline: 2px solid rgba(234, 241, 251, 0.85);
    outline-offset: 2px;
}
.npav-accent-swatch[aria-pressed="true"] {
    /* clean outer ring in the swatch's own accent color, offset from the
       dot by a sliver of the footer background so it reads as a ring,
       not a glow */
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.28) inset,
                0 0 0 2px var(--d-bg, #171a1f),
                0 0 0 3.5px currentColor;
}
.npav-accent-swatch--green  { background: #1fa65b; color: #1fa65b; }
.npav-accent-swatch--blue   { background: #4c8dff; color: #4c8dff; }
.npav-accent-swatch--purple { background: #9b7de8; color: #9b7de8; }
.npav-accent-swatch--orange { background: #f09a4a; color: #f09a4a; }