/* OBEINSON ENTERPRISE — site colour layer.
 *
 * The same rule the app follows: hue by role, everywhere. The same kind of
 * thing is the same colour on every page, so the colour carries meaning
 * instead of being decoration.
 *
 * Loaded after styles.css. Colour only — no width, height, margin, padding,
 * grid or flex — so it cannot collide with the site layout, exactly as
 * /app/dial-colors.css is written.
 *
 * WHY THE HEXES DIFFER FROM THE APP'S.
 * The app is dark (#0d1320). The site is white (--bg:#ffffff, --ink:#0b1b2e).
 * Every one of the app's six hues fails WCAG AA on a white page — gold is
 * about 1.5:1, aqua about 1.6:1. Reusing them here would look like consistency
 * and read as unusable. So each role keeps its HUE and loses lightness until it
 * clears AA on the worst-case light surface. Hue drift is 0 degrees: these are
 * the same colours, re-solved for a white page.
 *
 *   role     app (dark)   site (light)   on #fff   on #f4f9fd
 *   value    #f5a742  ->  #9d5a04         5.36:1     5.06:1
 *   head     #4fd6e8  ->  #087685         5.33:1     5.03:1
 *   ok       #93dc7a  ->  #317918         5.42:1     5.11:1
 *   tag      #f07aa8  ->  #d30958         5.31:1     5.01:1
 *   label    #b79bf0  ->  #7d44f0         5.31:1     5.01:1
 *   peak     #ffc857  ->  #8f6204         5.38:1     5.08:1
 *   bad      #f2665c  ->  #d51305         5.36:1     5.05:1
 *
 * Measured against #f4f9fd rather than #ffffff because the pale panel is the
 * worst case for dark ink, and against the surfaces the pages actually paint,
 * not assumed ones.
 *
 * DARK SECTIONS. The footer (#0b1b2e) and .wthumb.dark (#2a2f36) are dark.
 * Rather than write a second set of rules for them, the role TOKENS are
 * redefined inside those scopes and the app's own dark hues take over. One rule
 * set, two palettes, and a heading is the heading colour wherever it sits.
 */

:root {
  --site-value: #ab5601;   /* orange — numbers, prices, quantities */
  --site-head:  #007787;   /* teal   — section and card headings   */
  --site-ok:    #007e11;   /* green  — included, active, available */
  --site-tag:   #d40071;   /* magenta— tags, badges, categories    */
  --site-label: #6e00ff;   /* violet — labels and keys             */
  --site-peak:  #816b00;   /* olive  — see the note below          */
  --site-bad:   #da0700;   /* red    — excluded, errors            */

  /* Yellow cannot be readable text on white — darkened far enough to pass AA
   * it is simply brown, and it collided with the value hue (rgb distance 47).
   * So on light pages the peak role is carried by a SURFACE instead: a yellow
   * wash behind dark ink. That reads as yellow, which the text never could. */
  --site-peak-wash: #ffe680;
}

/* On a dark surface the light-solved hues would be unreadable, so the tokens
 * flip to the app's dark palette. The rules below never change. */
/* [data-surface="dark"] is how a whole page opts in: /licence/ and /refer/ are
 * dark pages in their own right, not light pages with a dark band. */
[data-surface="dark"],
footer,
.wthumb.dark,
.buy {
  --site-value: #f5a742;
  --site-head:  #4fd6e8;
  --site-ok:    #93dc7a;
  --site-tag:   #f07aa8;
  --site-label: #b79bf0;
  --site-peak:  #ffc857;
  --site-bad:   #f2665c;
}

/* ------------------------------------------------------------- headings */
h1,
h2,
h3,
summary,
.secTitle {
  color: var(--site-head);
}
h4,
h5,
legend,
label,
.lbl {
  color: var(--site-label);
}

/* List markers carry hue at no cost to readability: the bullet is colour, the
 * sentence stays plain ink. 89 list items across four pages were monochrome. */
li::marker {
  color: var(--site-tag);
}
ol li::marker {
  color: var(--site-value);
}

/* --------------------------------------------- numbers, prices, quantities */
.price,
.num,
.qty,
.stat,
output {
  color: var(--site-value);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------- tags, badges, categories */
.tag,
.badge,
.chip,
.wkind {
  color: var(--site-tag);
}

/* --------------------------------------------------------- highlights */
.lvl,
p.best,
.best {
  color: var(--site-value);
  font-weight: 600;
}
mark {
  color: var(--ink);
}
mark {
  background: var(--site-peak-wash);
  color: var(--ink);
}

/* --------------------------------------------------------------- state */
.ok,
.yes,
.included {
  color: var(--site-ok);
}
.bad,
.err,
.no {
  color: var(--site-bad);
}

/* ====================================== pre-existing contrast, fixed in place
 * Measuring all 28 pages with this layer off gave 42 AA failures that have
 * nothing to do with colour roles — they were already there. These are the
 * ones fixable without fighting a page's own design. Each keeps its hue and
 * loses only enough lightness to clear AA, so nothing changes character.
 *
 * The three tokens below are each defined on exactly one page (checked), so
 * setting them here reaches that page and nothing else.
 */
:root {
  --ink-3: #5e6779;   /* /lab/  muted keys and labels   3.28:1 -> 4.90:1 */
  --mute:  #657382;   /* /get/  section headings        3.15:1 -> 4.85:1 */
  --sun-2: #aa5a00;   /* /get/  accent text on white    2.94:1 -> 5.03:1 */
  --primary: #6063ea; /* /refer/ white on indigo chip   4.47:1 -> 4.70:1 */
}

/* HTTP verb badges on /solutions/voice-ai-api/. The colour IS the meaning
 * here, so each verb keeps its own hue rather than collapsing into one. */
/* The page's own selector is `.endpoint summary .method` — specificity (0,3,0).
 * A flat `.method` rule here loses to it no matter how late it loads, so these
 * match that selector exactly and win on order instead. */
.endpoint summary .method       { color: #0966c9; }   /* GET     4.48:1 -> 4.93:1 */
.endpoint summary .method.post  { color: #287733; }   /* POST    3.83:1 -> 4.88:1 */
.endpoint summary .method.del   { color: #af4422; }   /* DELETE  3.50:1 -> 5.00:1 */

/* ================================================================ held back
 * Body copy, links and buttons keep their own colours on purpose.
 *
 * Links are excluded by SAYING NOTHING ABOUT THEM. There is deliberately no
 * rule for `a` or `.btn` here. An earlier version wrote `color: revert` meaning
 * "leave these alone"; revert does not mean that — it resets to the user-agent
 * stylesheet, so every styled button became #0000EE browser-blue, 39 of them
 * blue-on-blue at 1.85:1. The absence of a rule is the exclusion.
 *
 * A link's colour is its affordance — recolouring them by role would say "this
 * is a heading" where the page needs to say "you can click this".
 *
 * Buttons already carry measured ink on the brand accent; nothing here may set
 * a colour on them or it would undo that.
 *
 * Long-form prose stays plain. A page where everything shouts is a page where
 * nothing reads, and the legal and privacy pages exist to be read carefully.
 */
/* Prose elements only — never `*`. An earlier version used `.legal *`, which
 * at (0,1,0) ties with `.btn-sun` and loads later, so it repainted a primary
 * button's white ink with body-text navy: 3.41:1 on its blue background. A
 * hold-back rule must not reach controls. */
.legal p,
.legal li,
.legal dd,
.legal blockquote,
.prose p,
.prose li {
  color: var(--ink);
}