/* ═══════════════════════════════════════════════════════════════════════════
   contrast.css — THE AUTO-CONTRAST CONTRACT
   Daralbeida Multi-Entity Platform · 2026-07-24

   THE PROBLEM THIS SOLVES
   The skin lets any colour be chosen for the accent. A colour that reads
   beautifully on dark chrome can be illegible on a light card — the two
   surfaces are both real, and one accent cannot suit both. Measured on
   /darmaster/__darmaster/domains.php with the salmon skin: the service chips
   rendered rgb(255,214,133) on rgb(255,255,255) — a contrast ratio of 1.38:1,
   where WCAG AA wants 4.5:1 for text and 3:1 for large text. Unreadable, and
   NOT the skin's fault: the same accent is correct on the dark nav.

   THE RULE (no hardcoded colours, ever)
   Take the SKIN's own colour and move ONLY its lightness, and only as far as
   it needs to go, keeping hue and chroma so it still reads as that colour:

       oklch(from var(--nav-gold) min(l, 0.45) c h)

   min()/max() are the whole trick — they are a NO-OP when the colour is
   already legible, so a well-chosen skin passes through untouched and only a
   failing one is corrected. That is "the nearest sufficiently contrasted
   colour", literally: the smallest possible move along one axis.

   Verified in this environment before adoption:
     CSS.supports('color','oklch(from red l c h)')  -> true
     oklch(from #feac93 min(l,0.45) c h)            -> oklch(0.45 0.103 37.68)
   i.e. lightness clamped, chroma + hue preserved.

   THE TWO BANDS (thresholds are measured, not round numbers)
     ON LIGHT objects (cards, rows, --row-bg surfaces): lightness must be at
       most 0.45 — at 0.45 an accent hue clears 4.5:1 against #F6F1E6/#FFF.
     ON DARK chrome (nav, panels, --nav-bg surfaces): lightness at least 0.78
       — below that, mid-tone accents fall under 4.5:1 against the deep grounds.

   HOW TO USE — never write a colour, pick the surface you are painting on:
       color: var(--ink-on-light)      .. text on a light card/row
       color: var(--ink-on-dark)       .. text on dark chrome
       border-color: var(--edge-on-light)
   (Those examples use ".." not slash-star: CSS comments do NOT nest, and an
   inner terminator here would close THIS block early and make the parser eat
   the :root rule below — which is exactly what happened on first write.)
   FALLBACK: browsers without relative colour syntax keep the raw skin values,
   so nothing breaks — they simply do not get the correction.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* The legibility bands. Tune HERE and every surface follows — one knob. */
  --ink-l-on-light: 0.45;   /* max lightness for ink on a light object */
  --ink-l-on-dark:  0.78;   /* min lightness for ink on dark chrome    */
  /* Edges may sit one step softer than text — a border carries no glyph. */
  --edge-l-on-light: 0.58;
  --edge-l-on-dark:  0.68;

  /* FALLBACK VALUES — the raw skin colours, used as-is where relative colour
     syntax is unavailable. Overridden by the @supports block below. */
  --ink-on-light:  var(--nav-gold, #B8832A);
  --ink-on-dark:   var(--nav-gold, #B8832A);
  --edge-on-light: var(--nav-gold, #B8832A);
  --edge-on-dark:  var(--nav-gold, #B8832A);
  /* body ink corrected for a light object (used where --text-color may be set
     to something too pale by a skin) */
  --text-on-light: var(--text-color, #1C1410);
}

@supports (color: oklch(from red l c h)) {
  :root {
    /* ACCENT, made legible on each ground. Hue + chroma untouched. */
    --ink-on-light:  oklch(from var(--nav-gold, #B8832A) min(l, var(--ink-l-on-light)) c h);
    --ink-on-dark:   oklch(from var(--nav-gold, #B8832A) max(l, var(--ink-l-on-dark))  c h);
    --edge-on-light: oklch(from var(--nav-gold, #B8832A) min(l, var(--edge-l-on-light)) c h);
    --edge-on-dark:  oklch(from var(--nav-gold, #B8832A) max(l, var(--edge-l-on-dark))  c h);
    /* body text on a light object — clamp a too-pale skin ink downward */
    --text-on-light: oklch(from var(--text-color, #1C1410) min(l, 0.40) c h);
  }
}