/* ==========================================================================
   MANIWRKS THEME
   --------------------------------------------------------------------------
   Every colour on the site is defined ONCE, here. Change a value in this file
   and it takes effect on every page. Nothing else needs touching.

   No build step. No framework. One file, one <link> per page.
   ========================================================================== */

:root {

  /* ---- SURFACES -------------------------------------------------------- */
  --bg:           #ffffff;   /* page background                             */
  --bg-deep:      #f4f5f6;   /* header and footer bands                     */
  --surface:      #f7f8f9;   /* cards, panels                               */
  --surface-hi:   #eef0f2;   /* card hover, image wells                     */

  /* ---- TEXT ------------------------------------------------------------
     Contrast against --bg is noted for each. WCAG AA wants 4.5:1 for body
     text and 3:1 for large text. Keep every value at 4.5 or better and the
     site stays readable for everyone.                                      */
  --text:         #16191d;   /* headings and primary copy      16.3:1       */
  --muted:        #39414a;   /* body copy                      10.4:1       */
  --dim:          #5a636d;   /* captions, notes, labels         6.4:1       */

  /* ---- ACCENT ----------------------------------------------------------
     ONE orange. Everything orange on the site — buttons, rules, headings,
     links, table headers, the lot — is this single value.

     Why this exact orange and not #ff5500: an orange used as TEXT on white
     has to stay dark enough to read. #ff5500 measures 3.2:1 and fails.
     #bc4600 measures 5.2:1 on white and, more importantly, still clears 4.5:1
     on the grey card and table-header panels where a lot of the orange text
     actually sits. Sizing it against plain white is not enough — the panels
     are what set the real ceiling. Lighten much past this and small orange
     text on a grey panel stops being legible.

     Because the orange is dark enough to read as text, text sitting ON an
     orange fill must be WHITE, not black. That is --on-accent.

     Want the brighter #ff5500 back? It can only be used for fills and for
     text at 24px+. Every small orange label would have to become grey. That
     is the trade, and it is why this file has one orange and not two.      */
  --accent:       #bc4600;   /* every orange on the site        5.2:1       */
  --accent-hot:   #9c3a00;   /* fill hover — darker, not lighter            */
  --on-accent:    #ffffff;   /* text sitting ON an orange fill  5.2:1       */

  /* Kept as an alias so existing var(--accent-ink) calls resolve. Same
     orange. Do not give it a different value — that is what caused the
     mismatch you spotted. */
  --accent-ink:   var(--accent);

  /* Orange at low opacity, for tints and hairlines. Derived from --accent-rgb
     so a tint can never drift away from the solid colour. Change --accent-rgb
     to match whenever you change --accent. */
  --accent-rgb:   188, 70, 0;

  /* ---- LINES AND STATES ------------------------------------------------ */
  --border:       #d3d8dd;
  --border-dim:   #e4e8eb;
  --danger:       #b3261e;

  /* ---- TYPE ------------------------------------------------------------
     --sans carries all body copy. It is the system UI stack, so it costs zero
     network requests and renders as the font the reader's OS already uses:
     Segoe UI on Windows, SF on Mac, Roboto on Android. Nothing to load,
     nothing to break, and it reads as a supplier rather than a terminal.

     --mono marks the "data" text: spec tables, prices, calculator output,
     the 404 page. It points at --sans, so the whole site is one font.
     For typewriter-style numbers in those spots again, set it back to:
       ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
       "Liberation Mono", "Courier New", monospace

     Want a branded typeface later? Swap --sans for one Google Font here and
     add its <link> to each page. One value, one place.                     */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: var(--sans);

  /* ---- ALIASES ---------------------------------------------------------
     The sell sheets were written against an older set of names. Pointing the
     old names at the new ones means the sheets pick up this palette without
     rewriting several hundred var() calls in each file. Do not edit these —
     edit the values above.                                                 */
  --bg-color:      var(--bg);
  --surface-color: var(--surface);
  --text-main:     var(--text);
  --text-muted:    var(--muted);
  --accent-orange: var(--accent);
  --danger-red:    var(--danger);
}

/* --------------------------------------------------------------------------
   GOING BACK TO DARK
   Swap the SURFACES and TEXT blocks above for these and leave the rest alone:

     --bg: #0d0d0d;  --bg-deep: #050505;  --surface: #111111;
     --surface-hi: #161616;
     --text: #ffffff;  --muted: #d6d6d6;  --dim: #b3b3b3;
     --accent-ink: #ff7733;  --on-accent: #16191d;
     --border: #444444;  --border-dim: #262626;

   Those muted and dim values are deliberately lighter than the originals
   (#b3b3b3 / #7d7d7d), which were the hard-to-read greys.
   -------------------------------------------------------------------------- */