/* Punched — shared design tokens
 *
 * The single source of colour for every Punched front end. Linked from
 * admin.html, dashboard.html, index.html, cs.html, burndown.html,
 * sop-module.html and fire-register.html, and precached by sw.js so the
 * scanner still renders offline.
 *
 * Every token is prefixed --ff- on purpose. The pages have pre-existing local
 * custom properties that disagree with each other: burndown.html and
 * sop-module.html BOTH define --green, --amber and --red with different values,
 * and burndown.html defines --navy as #13516f where the brand calls that
 * --fullers. Unprefixed shared names would be silently overridden per page and
 * resolve to the wrong colour. Do not drop the prefix.
 *
 * Layer 1 is the brand, copied verbatim so it can be diffed against source:
 *   ~/code/work/fullers-branding/Colours/Fullers Colours.txt
 * which matches the theme palette registered by fullers-logistics.com.
 * Do not add a colour to layer 1 that is not in that file.
 *
 * Layer 2 is what page CSS should actually reference. Every layer-2 value is
 * either a brand colour or a literal that was already in use somewhere in the
 * app, so converting a literal to its token is a visual no-op. Two values are
 * derived rather than brand and are marked as such.
 */

:root {
  /* ---------------------------------------------------------------------
   * Layer 1 — Fullers brand. Brand file name → token:
   *   --fullers → --ff-fullers            --fulfilment → --ff-fulfilment
   *   --distribution → --ff-distribution  --logistics  → --ff-logistics
   *   --navy → --ff-navy                  --lightGrey  → --ff-light-grey
   *   --fullersSoft/--fulfilmentSoft/--distributionSoft/--logisticsSoft
   *     → --ff-*-soft
   * ------------------------------------------------------------------ */
  --ff-fullers:      #13516f;  /* primary */
  --ff-fulfilment:   #ee7402;  /* accent */
  --ff-distribution: #fdc330;
  --ff-logistics:    #5abdd3;
  --ff-navy:         #1f3543;
  --ff-light-grey:   #e6e8e9;

  --ff-fullers-soft:      #e7f3f5;
  --ff-fulfilment-soft:   #fff7ef;
  --ff-distribution-soft: #fff7e4;
  --ff-logistics-soft:    #f0fcff;

  /* ---------------------------------------------------------------------
   * Layer 2 — semantic. Reference these from page CSS.
   * ------------------------------------------------------------------ */

  /* Brand roles.
   * --ff-brand-deep is derived (a darker --ff-fullers), already used as
   * #0E3D54 for the scanner chrome before this file existed.
   * --ff-accent-ink and --ff-accent-deep are derived: --ff-fulfilment is
   * 2.94:1 on white and fails WCAG AA, both as text and as a fill behind white
   * text. Use --ff-accent for fills, borders, dots and focus rings only;
   * --ff-accent-ink (4.74:1 on white) for orange text; and --ff-accent-deep
   * (white text on it is 6.26:1) where white sits on an orange fill. */
  --ff-brand:       var(--ff-fullers);
  --ff-brand-deep:  #0e3d54;
  --ff-brand-navy:  var(--ff-navy);
  --ff-accent:      var(--ff-fulfilment);
  --ff-accent-ink:  #b85800;
  --ff-accent-deep: #9a4a00;

  /* Neutrals — promoted from admin.html, the only page that had a scale.
   * Near-duplicate greys elsewhere (#f5f5f5, #f0f0f0, #e0e0e0 …) are
   * deliberately NOT collapsed onto these yet; that is stage 6b. */
  --ff-surface:        #ffffff;
  --ff-surface-alt:    #f5f7fa;
  --ff-surface-info:   #e8f0fe;
  --ff-border:         #e4e8ed;
  --ff-text:           #1e2938;
  --ff-text-muted:     #5a6472;
  --ff-text-faint:     #8c95a1;

  /* Status on light surfaces.
   * -ink variants are the accessible text colours; the base is for fills,
   * borders and large numerals. */
  --ff-ok:          #27ae60;
  --ff-ok-deep:     #219a52;
  --ff-ok-ink:      #166534;
  --ff-ok-bg:       #d4edda;

  --ff-warn:        #f39c12;
  --ff-warn-deep:   #e67e22;
  --ff-warn-ink:    #854f0b;
  --ff-warn-bg:     #fff8e1;

  --ff-danger:      #e74c3c;
  --ff-danger-deep: #c0392b;
  --ff-danger-ink:  #991b1b;
  --ff-danger-bg:   #fef2f2;

  --ff-info:        #2980b9;
  --ff-info-light:  #3498db;
  --ff-info-ink:    #1a56db;
  --ff-info-bg:     #e8f0fe;

  --ff-purple:      #8e44ad;
  --ff-purple-bg:   #f0e2f8;

  /* Status and surfaces on dark. burndown.html is the only dark-surfaced
   * page; these are its existing values, kept because the light ramp above
   * is tuned for dark-on-light and inverts badly. */
  --ff-ok-on-dark:     #3fc380;
  --ff-warn-on-dark:   #f0b429;
  --ff-danger-on-dark: #e8503a;
  --ff-accent-on-dark: #ff9a3d;
  --ff-navy-deep:      #0a2330;
  --ff-navy-card:      #10394e;
  --ff-navy-line:      #1d5d7d;
  --ff-cream:          #f5efe2;
  --ff-cream-dim:      #b9c6cc;
}