/* Reformat family accent layer v1.0 (11 Oct 2026).
   Load AFTER Studio's site.css and BEFORE any brand file (jj.css, ra.css, rl additions).
   Set the brand on <html data-brand="jj|agency|labs|studio">.
   This file is the only place an accent colour may be defined. Brand files must use var(--accent*) and never a hex. */

:root,
:root[data-brand='studio'] {
  /* Studio: Clay */
  --accent: #b8471f;          /* text, dots, rules on white and #f5f5f3 (5.3:1) */
  --accent-on-ink: #f0956e;   /* the same jobs on .s--ink sections */
  --accent-soft: #f8ece6;     /* the one tinted panel a page may have */
}
:root[data-brand='jj'] {
  /* Jay Janes: Petrol (from the live jayjanes.com --petrol-grad start) */
  --accent: #0b6b6b;
  --accent-on-ink: #3fb8b3;
  --accent-soft: #e7f2f1;
}
:root[data-brand='agency'] {
  /* Reformat Agency: Blue (from xpandly #0454b0) */
  --accent: #0454b0;
  --accent-on-ink: #57a2f7;
  --accent-soft: #e8f0fa;
}
:root[data-brand='labs'] {
  /* Reformat Labs: Purple (from the RL primary, hsl 265 100% 30%) */
  --accent: #3f0097;
  --accent-on-ink: #c9a8ff;
  --accent-soft: #efeaf8;
}

/* ---- The permitted accent jobs. Nothing else in the family carries the accent. ---- */

/* 1. The wordmark full stop: "Jay Janes." "Reformat Labs." */
.logo i { font-style: normal; color: var(--accent); }
.s--ink .logo i, .ftr .logo i { color: var(--accent-on-ink); }

/* 2. The label dot (the text stays muted grey) */
.label::before { background: var(--accent); }
.s--ink .label::before { background: var(--accent-on-ink); }

/* 3. Link underlines and hovers */
.nav > a:hover, .nav__drop > a:hover, .mega__foot a:hover, .ftr a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.dotlink { border-bottom-color: var(--line); }
.dotlink:hover { border-bottom-color: var(--accent); }
.body a, .prose a { text-decoration-color: var(--accent); text-underline-offset: 4px; }

/* 4. Focus rings and form focus */
:focus-visible { outline-color: var(--accent); }
.navt:focus-visible + .navbtn { outline-color: var(--accent); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* 5. Selected state: a 2px accent underline under the selected tab (the ink pill stays ink) */
.tabbar button[aria-selected='true'] { box-shadow: inset 0 -2px 0 var(--accent-on-ink); }

/* 6. Selection and form controls */
::selection { background: var(--accent-soft); color: var(--ink); }
input[type='checkbox'], input[type='radio'], input[type='range'], progress { accent-color: var(--accent); }

/* 7. One tinted panel per page, opt-in */
.panel--accent { background: var(--accent-soft); }

/* 8. Small marks: numerals in step lists, stat rules, icon strokes */
.accent-mark { color: var(--accent); }
.s--ink .accent-mark { color: var(--accent-on-ink); }
.accent-rule { display: block; width: 32px; height: 2px; background: var(--accent); }
.s--ink .accent-rule { background: var(--accent-on-ink); }

/* Buttons stay ink. Headings stay ink. Section backgrounds stay white, #f5f5f3 or ink. */

/* Phones (Jay, 13 Oct 2026, as on Reformat Studio): tabs are separate pills with no pill behind them. */
@media (max-width: 760px) {
  .tabbar, .pagetabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; background: none; border-radius: 0; box-shadow: none; }
  .tabbar button, .pagetabs button { background: var(--white); border: 1px solid var(--line); }
  .tabbar button[aria-selected='true'], .pagetabs button[aria-selected='true'] { background: var(--ink); border-color: var(--ink); }
}