/* ==========================================================================
   Perreo — Color tokens
   A rotating set of 4 saturated "chapter" hues + ink black/paper white.
   Each dictionary entry/spread commits to ONE accent color for that page —
   never mixes two accents on one surface. Mirror that discipline in product.
   ========================================================================== */

:root {
  /* base hues */
  --hue-magenta: #A6389B;
  --hue-magenta-dark: #7C2A75;
  --hue-green: #5CAD48;
  --hue-green-dark: #438236;
  --hue-orange: #E17A4C;
  --hue-orange-dark: #B85E38;
  --hue-teal: #1996C4;
  --hue-teal-dark: #136E93;

  --ink: #141414;
  --ink-soft: #262626;
  --paper: #FFFFFF;
  --paper-dim: #F4F1EC;

  /* semantic surface aliases — pick ONE accent per screen/section */
  --surface-magenta: var(--hue-magenta);
  --surface-green: var(--hue-green);
  --surface-orange: var(--hue-orange);
  --surface-teal: var(--hue-teal);
  --surface-ink: var(--ink);
  --surface-paper: var(--paper);

  --fg-on-accent: #FFFFFF;
  --fg-on-ink: #FFFFFF;
  --fg-on-paper: var(--ink);
  --fg-muted-on-accent: rgba(255,255,255,0.72);
  --fg-muted-on-paper: rgba(20,20,20,0.6);

  /* highlighter-pen text mark used on key slang terms mid-paragraph */
  --highlight-default: #D9D4E8;
  --highlight-on-magenta: #E9A9DE;
  --highlight-on-green: #CFEFC2;
  --highlight-on-orange: #FBD3B9;
  --highlight-on-teal: #BEE7F5;

  /* grunge highlight/underline shape — an irregular, slightly-rotated
     rounded box standing in for a rough brush/highlighter stroke; used on
     both <mark> terms and inline links so both read as the same
     hand-marked device */
  --highlight-radius: 2px 9px 4px 8px / 7px 2px 8px 3px;
  --highlight-rotate: -0.6deg; /* @kind other */

  --border-on-paper: rgba(20,20,20,0.14);
  --border-on-accent: rgba(255,255,255,0.35);

  /* This is a solid-color + grunge-texture brand — product surfaces never
     sit on plain white "paper". --surface-app is the default screen/page
     background (falls back to ink); pair with .texture-grain and/or a
     splatter utility from textures.css. --paper/--paper-dim remain only for
     small inset chips that need to read as a physical paper scrap. */
  --surface-app: var(--surface, var(--ink));
  --surface-app-alt: var(--ink-soft);
}

/* per-accent theme scopes — set data-accent="magenta|green|orange|teal|ink"
   on any container to retint --surface / --fg / --highlight together */
[data-accent="magenta"] { --surface: var(--hue-magenta); --surface-strong: var(--hue-magenta-dark); --highlight: var(--highlight-on-magenta); }
[data-accent="green"]   { --surface: var(--hue-green);   --surface-strong: var(--hue-green-dark);   --highlight: var(--highlight-on-green); }
[data-accent="orange"]  { --surface: var(--hue-orange);  --surface-strong: var(--hue-orange-dark);  --highlight: var(--highlight-on-orange); }
[data-accent="teal"]    { --surface: var(--hue-teal);    --surface-strong: var(--hue-teal-dark);    --highlight: var(--highlight-on-teal); }
[data-accent="ink"]     { --surface: var(--ink);         --surface-strong: #000;                    --highlight: var(--highlight-default); }

/* ------------------------------------------------------------------------
   Grunge highlight mark + link underline — same rough highlighter-box
   treatment used on both. Applies inside any element (mark, a, .highlight);
   pairs with --highlight set per accent scope above.
   ------------------------------------------------------------------------ */
mark,
a,
.highlight {
  background: var(--highlight, var(--highlight-default));
  color: inherit;
  text-decoration: none;
  padding: 1px 6px 2px;
  border-radius: var(--highlight-radius);
  display: inline-block;
  transform: rotate(var(--highlight-rotate));
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

a {
  font-weight: 700;
  cursor: pointer;
}
a:hover {
  filter: brightness(0.94);
}
a:active {
  transform: rotate(var(--highlight-rotate)) translate(1px, 1px);
}