/*
  Hera design tokens — the brand violet, taken from the logo.

  The accent is the mark's own fill: assets/logo/hera-logo.svg is rgb(108,44,248)
  = #6C2CF8, and the plugin's --hera-brand-600 is that exact value. This file is
  the same ramp, so a button here and a button in wp-admin are one colour rather
  than two colours that nearly agree.

  Theme model (unchanged):
  - No [data-theme] = the dark values below (CSS fallback, before JS runs).
  - JS sets data-theme on load, defaulting to "light" — LIGHT is the real default.

  TWO ACCENT TOKENS, AND THE DIFFERENCE MATTERS.
  --color-accent-fill  is a ground. It carries white on top of it and is never
                       used as text: in dark it measures 3.27:1 on the page and
                       2.92:1 on a card, which is below AA for anything readable.
  --color-accent       is text, icons and borders.
  In light the two are close enough to look interchangeable; in dark they are
  not. This is the exact defect that shipped in the plugin's own stylesheet and
  was fixed on 2026-09-07 (F-RD3-UX-006) — thirteen rules had used the fill token
  as text, invisible because light mode renders both the same. Do not merge them.

  --gold is kept as an alias of --color-accent so the existing rules that name it
  keep working unchanged. It is no longer gold. Rename at leisure. Re-derive the
  count rather than quoting one from here — 30 rules on 2026-09-07, of which 19
  use it as `color:` and the rest as a border or a 8-12% wash:

      grep -c 'var(--gold)' shared/css/components.css
*/

:root {
  /* ---- dark (also the pre-JS fallback) ---- */
  --color-bg: #18151D;        /* kept from the previous palette: hue 262, already the brand hue */
  --color-surface: #241F2C;   /* kept */
  --color-text: #F2EFF7;      /* was #F7F2EA — cooled to sit under a violet accent */
  --color-divider: color-mix(in srgb, #F2EFF7 16%, transparent);

  --color-accent: #C4A5FD;         /* text/icon/border — 8.72 on bg, 7.76 on card */
  --color-accent-2: #DDCBFD;       /* a:hover — 12.06 on bg */
  --color-accent-fill: #7B3FF0;    /* button ground — white on it is 5.51 */
  --color-accent-fill-hover: #6425D8;
  --color-accent-fill-active: #5A1FD4;
  --color-on-accent: #FFFFFF;
  --color-accent-soft: #2A1F52;    /* tinted panel behind accent text */
  --gold: var(--color-accent);     /* compatibility alias — see the header */

  --color-pro: #F0C64A;            /* the ONE warm colour left, and only for the paid tier */
  --color-on-pro: #1A1622;         /* 10.90 on --color-pro */

  /* The previous #C25454 measured 4.03 here and 4.10 on the light ground — below AA
     on both, for the one message a user most needs to read. */
  --color-error: #FCA5A5;          /* 9.51 on --color-bg */

  /* ---- the always-dark bands ----
     .cta-band, .plan--popular, .site-footer and .article-body pre are dark in BOTH
     themes by design. They are declared once here and NOT overridden in the light
     block, so a light-theme reader still gets a foreground chosen for this ground
     instead of the page's. They used to be hex literals inside components.css,
     which is why the light theme had no say in them at all. */
  --color-ink: #18151D;
  --color-ink-deep: #100E14;
  --color-ink-surface: #241F2C;
  --color-on-ink: #F2EFF7;          /* 15.87 on --color-ink */
  --color-on-ink-muted: #A9A2B6;    /* 7.33 */
  --color-ink-accent: #C4A5FD;      /* 8.72 */
  --color-ink-badge: #A276F9;       /* a badge ground on ink: ink text on it is 5.50 */

  --color-neutral-100: #F4F2F9; --color-neutral-200: #E4E0EC; --color-neutral-300: #C7C1D2;
  --color-neutral-400: #A9A2B6; --color-neutral-500: #948CA3; --color-neutral-600: #6F6880;
  --color-neutral-700: #4A4458; --color-neutral-800: #332D3F; --color-neutral-900: #241F2C;

  --color-accent-100: #F0E9FE; --color-accent-200: #DDCBFD; --color-accent-300: #C2A4FB;
  --color-accent-400: #A276F9; --color-accent-500: #8549F9; --color-accent-600: #6C2CF8;
  --color-accent-700: #5A1FD4; --color-accent-800: #4718A6; --color-accent-900: #331178;

  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading-weight: 700;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 0 0 1px #332D3F;
  --shadow-md: 0 0 0 1px #4A4458, 0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 0 0 1px #6F6880, 0 16px 40px rgba(0,0,0,0.65);
  --shadow-drop: 0 16px 40px rgba(0,0,0,0.65);   /* --shadow-lg without its 1px ring */

  --container-max: 1160px;
}

html[data-theme="light"] {
  --color-bg: #F6F4FB;        /* was cream #F7F2EA (hue 37, near-complementary to the accent) */
  --color-surface: #FFFFFF;
  --color-text: #1A1622;
  --color-divider: color-mix(in srgb, #1A1622 14%, transparent);

  --color-accent: #5A1FD4;         /* text — 7.46 on bg, 8.14 on card */
  --color-accent-2: #4718A6;       /* a:hover — 9.88 on bg */
  --color-accent-fill: #6C2CF8;    /* the logo's own value; white on it is 6.26 */
  --color-accent-fill-hover: #5A1FD4;
  --color-accent-fill-active: #4718A6;
  --color-on-accent: #FFFFFF;
  --color-accent-soft: #F0E9FE;

  --color-pro: #856404;
  --color-on-pro: #FFFFFF;         /* 5.49 on --color-pro */
  --color-error: #C0392F;          /* 4.98 on --color-bg, 5.43 on white */

  /* The ramp inverts, but --color-neutral-500 is NOT the mirror axis any more.
     It used to be #8F8794 in both themes: 5.21 on the dark ground, and 3.11 on
     the cream ground it had then (3.18 against this file's lighter one — either
     way below AA). It carries 22 rules, 21 of them 11-13.5px text (captions,
     post meta, plan notes, breadcrumbs, pagination, form notes) and one a 19px
     icon. It failed AA in the DEFAULT theme only, which is why nobody saw it.
     Re-derive before quoting the 22:
        grep -c 'color: var(--color-neutral-500)' shared/css/components.css
     (that pattern also matches border-color; subtract those). */
  --color-neutral-100: #221F29; --color-neutral-200: #3B3645; --color-neutral-300: #544E5F;
  --color-neutral-400: #5F5869; --color-neutral-500: #6D6577; --color-neutral-600: #8B8397;
  --color-neutral-700: #C7C1D2; --color-neutral-800: #E4E0EC; --color-neutral-900: #F4F2F9;

  --shadow-sm: 0 0 0 1px #E4E0EC;
  --shadow-md: 0 0 0 1px #DCD7E8, 0 6px 18px rgba(26,22,34,0.10);
  --shadow-lg: 0 0 0 1px #C7C1D2, 0 16px 40px rgba(26,22,34,0.16);
  --shadow-drop: 0 16px 40px rgba(26,22,34,0.16);
}