/* =============================================================================
 * tokens.css — the suite's ONE design vocabulary. Loaded FIRST on every page,
 * before any other stylesheet or <style> block.
 *
 * WHY THIS EXISTS. There were nine style systems and three vocabularies. The
 * two pages on styles.css said --brand-tint, --border and --success; the hub
 * said --border too but meant a different colour; the seven tool pages said
 * --brand-bg, --line and --ok for the same three ideas and disagreed on two of
 * the values. Same name, different colour, and the same colour under three
 * names — so a palette change had to be made nine times and got made once.
 *
 * STEP 2 REPAINTED IT. The names and the structure are exactly as step 1 left
 * them; only the values moved, from the Kixly teal book to the OPPWA.OS warm
 * palette, so operators build familiarity with the system they are moving to.
 * Every value below is taken from the OPPWA.OS reference, not invented — the
 * four the brief marked (measure) were read out of its own token maps:
 *   bg  { ok #E9F4EE  warn #FBF2DF  bad #FBECE9  accent #FDF0E8 }
 *   bd  { ok #C9E4D5  warn #EFDFBA  bad #F1D2CC  accent #F6DCC9 }
 *   fg  { ok #16794F  warn #8F6206  bad #B93A2C  accent #C9531A }
 * That map also corrects one value the brief supplied: --brand-border was given
 * as #EFDFBA, which is the WARN border. The accent (orange) border is #F6DCC9,
 * and that is what is used here.
 *
 * SEMANTIC COLOURS STAY LOUD. success / warning / error are the reconcile
 * signal — the load-bearing safety check on the statement tool — and are never
 * brand-ified. That rule predates this file and outlives it.
 *
 * EXTRAS. The core vocabulary does not cover every colour this suite already
 * uses: a handful of one-off greys, the highlight chip, the Kixly mark. Those
 * are declared below the fold under EXTRAS with their exact current values, so
 * that no hex literal survives outside this file and no value silently moved.
 * Each is a candidate for deletion or promotion in step 2, not a decision made
 * here.
 * ========================================================================== */
:root {
  /* ---- surfaces ---------------------------------------------------------- */
  --bg:              #FAF9F7;   /* page */
  --surface:         #FFFFFF;   /* cards, header, footer, inputs */
  --surface-2:       #F5F3F0;   /* table head, parser-note panel */
  --surface-3:       #F2EEE8;   /* stat blocks on the seven tool pages */
  --border:          #E5E1DA;   /* the default hairline */
  --border-strong:   #EFEBE4;   /* hub tool cards + placeholder outline */

  /* ---- text -------------------------------------------------------------- */
  --ink:             #1B1A18;   /* headings, body */
  --ink-2:           #1F1E1B;   /* DECLARED, UNUSED. The hub's former --ink,
                                   kept so the value is recorded rather than
                                   deleted. Step 2 decides whether a second ink
                                   level earns its place. */
  --muted:           #57534C;   /* captions, secondary text */
  --muted-2:         #6E6A63;   /* fainter still — column labels, meta */

  /* ---- brand ------------------------------------------------------------- */
  --brand:           #E2601B;
  --brand-hover:     #C9531A;
  --brand-tint:      #FDF0E8;   /* chips, icon wells, brand wash */
  --brand-border:    #F6DCC9;
  --brand-on:        #FFFFFF;   /* text/icons ON a brand fill */

  /* ---- state: success ---------------------------------------------------- */
  --success:         #16794F;
  --success-tint:    #E9F4EE;
  --success-border:  #C9E4D5;

  /* ---- state: warning ---------------------------------------------------- */
  --warning:         #8F6206;
  --warning-tint:    #FBF2DF;
  --warning-border:  #EFDFBA;

  /* ---- state: error ------------------------------------------------------ */
  --error:           #B93A2C;
  --error-tint:      #FBECE9;
  --error-border:    #F1D2CC;

  /* ---- state: info ------------------------------------------------------- *
   * Info is brand-coloured in this suite and always has been — the live
   * .banner.info on Bunnings and Rebates reads brand-on-brand-wash. It maps to
   * the reference's "accent" kind, which is the same relationship in the new
   * palette. Kept as its own trio so a future theme can separate the two
   * without a sweep. */
  --info:            #C9531A;
  --info-tint:       #FDF0E8;
  --info-border:     #F6DCC9;

  /* ---- type -------------------------------------------------------------- *
   * IBM Plex, vendored under vendor/fonts and loaded by fonts.css BEFORE this
   * file — never from a CDN. Step 1 found 'Inter' named here and never loaded,
   * so the suite rendered one way on a machine that happened to have it and
   * another way on a machine that did not. These faces actually ship.
   * The fallbacks are the system stack, so a font that fails to load costs
   * shape and not legibility. */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* The six steps the suite actually uses at more than one site. Sizes that
     appear once (34px hero total, 17px card title, 10.5px group label) stay
     literal until step 2 decides whether they should. */
  --fs-xs:           11px;
  --fs-sm:           12px;
  --fs-base:         13px;
  --fs-lg:           15px;
  --fs-xl:           18px;
  --fs-2xl:          24px;

  /* ---- space ------------------------------------------------------------- */
  --sp-1:            2px;
  --sp-2:            4px;
  --sp-3:            6px;
  --sp-4:            8px;
  --sp-5:            12px;
  --sp-6:            16px;
  --sp-7:            20px;
  --sp-8:            24px;

  /* ---- radius ------------------------------------------------------------ */
  --r-sm:            7px;
  --r-md:            8px;       /* was --radius */
  --r-lg:            12px;
  --r-full:          999px;

  /* ---- shadow ------------------------------------------------------------ */
  --shadow-sm:       0 8px 26px rgba(27, 26, 24, .10);
  --shadow-md:       0 10px 40px rgba(27, 26, 24, .12);

  /* =========================================================================
   * EXTRAS — beyond the core vocabulary.
   *
   * Every one of these is a colour the suite uses today that no semantic token
   * describes. They are here so that gate (a) holds — zero hex outside this
   * file — WITHOUT quietly repainting anything. Nothing below is a new colour.
   * ====================================================================== */

  /* RESOLVED (step 1 flagged this). It was #A9C4E1, a blue on a teal book,
     dressing one control; the seven tool pages independently used #B8C6BF for
     the same control. Both are now #A8A29A, the reference's own mid warm
     neutral. A disabled control should read as "inert", which is what a
     desaturated neutral says and what a saturated hue never does — and the two
     names now hold one value, so the next person cannot pick the wrong one.
     Kept as two names only because two rules in two files still reference them;
     they collapse to one in the next tidy. */
  --brand-disabled:  #A8A29A;
  --btn-disabled-2:  #A8A29A;   /* tool pages' button.primary:disabled */

  /* Neutral one-offs, statement/sales tools. */
  --rule-faint:      #EFEBE4;   /* table row rule */
  --rule-cool:       #C9C4BA;   /* scrollbar thumb, dot separator */
  --rule-dashed:     #D5D0C7;   /* dropzone dashed outline */
  --surface-hover:   #EAE6DF;   /* sortable column heading hover */
  --surface-inert:   #F5F3F0;   /* the N-T tax pill */
  --surface-ghost:   #F2EEE8;   /* tool pages' button.ghost */
  --surface-drop:    #FBFAF8;   /* tool pages' dropzone rest */
  --surface-drop-hv: #FDF0E8;   /* tool pages' dropzone hover */

  /* Off-month row tint. A NEUTRAL band, not the amber it used to be: the row is
     out of scope, which is information, not a warning, and on a palette whose
     warning tint is itself a warm cream the old #FDF8EE would now read as a
     flag. The reference's neutral surface says "not part of this" quietly. */
  --offmonth-tint:   #F7F5F2;

  /* The ex/GST highlight chip — the one figure the operator re-keys into MYOB.
     DELIBERATELY NOT REPAINTED. It sits outside both palettes on purpose: it is
     a highlighter, not a verdict, and it is the single highest-legibility
     element on the screen (ink on this yellow is 13.9:1). Every candidate in
     the new ramp is a state colour or too pale to read as emphasis. */
  --highlight:       #FFE97F;

  /* .btn-danger. Now folded onto the error trio rather than carrying its own
     three near-misses: rest is the error tint and border, and the hover border
     steps up to full --error so the control reads as armed on approach. */
  --danger-border:   #F1D2CC;
  --danger-tint:     #FBECE9;
  --danger-border-hv:#B93A2C;

  /* Text on --warning-tint. Darker than --warning so the input note stays
     legible as body copy rather than a label. */
  --warning-ink:     #6B4A05;

  /* refuel-rebate's new-location card. Was a near-white pink that the new page
     background would have swallowed; folded onto --error-tint. */
  --error-tint-soft: #FBECE9;

  /* Overlay scrims and the two shadows the core pair does not cover. All
     recoloured off --ink rather than pure black or the old teal, so shadows sit
     warm on a warm page instead of going grey-blue at the edges. The focus ring
     moves to the brand orange. */
  --scrim-light:     rgba(250, 249, 247, .70);
  --scrim-dark:      rgba(27, 26, 24, .42);
  --shadow-pop:      0 10px 28px rgba(27, 26, 24, .14);   /* combobox list */
  --shadow-modal:    0 18px 60px rgba(27, 26, 24, .25);
  --ring-brand:      0 0 0 3px rgba(226, 96, 27, .18);    /* focus ring */

  /* The Kixly mark. NOT repainted — it is a third party's logo, not part of the
     OPPWA palette, and recolouring somebody's mark to match your theme is how
     you end up shipping a wrong one. Isolated so a client swap is one block,
     not a grep. Duplicated as literals inside favicon.svg and the inline SVG in
     app.js / service-purchase.js, which CSS cannot reach. */
  --kixly-bg:        #FBFCFD;
  --kixly-edge:      #C9D2DC;
  --kixly-stem:      #1E2A38;
  --kixly-chevron:   #3175BD;
}