/* ==========================================================================
   tokens.css — Fresh Networking design tokens (SINGLE SOURCE OF TRUTH)
   --------------------------------------------------------------------------
   Owner: P00-2-design-system. Re-anchored by P00-6 to the REAL Fresh Networking
   brand (freshnetworking.com.au): green-forward, clean/flat, generous
   whitespace. This file is the canonical home for every brand colour, the
   type/spacing/z/radius/shadow/motion scales, and the per-role --accent remap.
   NO other stylesheet may define a raw brand hex — components and gamification
   read these custom properties only (constitution §5, AC1/AC2). Raw hex lives
   ONLY here.

   Colour-accessibility contract (WCAG AA, constitution §10, AC2)
   --------------------------------------------------------------------------
   Each role exposes four derived tokens, remapped by body[data-role="…"]:
     --accent       the role's identity FILL (buttons, brand bar, active tint)
     --accent-d     a darker shade for hover / active / borders
     --on-accent    text/icon colour placed ON --accent (AA ≥4.5 verified)
     --accent-ink   the accent rendered AS TEXT on white/surface (AA ≥4.5)

   P00-6 harmonises every role hue around Fresh's sage green (#76a85c). Each
   role's --accent is deep enough that WHITE text on the fill AND the fill AS
   text on white BOTH clear AA ≥4.5 — so --on-accent is white and --accent-ink
   equals --accent for every role (one readable pairing, no light-fill exception):

     role         --accent    on-accent  ratio   --accent-ink  text-on-white
     member       #3a7d42     #fff       5.00:1  #3a7d42       5.00:1  (Fresh green — hero)
     admin        #1c7f57     #fff       4.97:1  #1c7f57       4.97:1  (emerald)
     leader       #6c568f     #fff       6.24:1  #6c568f       6.24:1  (plum)
     area         #2d5e9e     #fff       6.55:1  #2d5e9e       6.55:1  (blue — data/trust)
     guest        #b0532f     #fff       5.09:1  #b0532f       5.09:1  (warm terracotta — welcome)
     superadmin   #343b78     #fff      10.28:1  #343b78      10.28:1  (deep indigo — premium)

   The bright sage (#76a85c) and the multi-hue brand family below are decorative
   only (brand bar tint, card thumbs, avatars, gamification) — never small text.
   All --*-ink text shades and the six role accents were re-verified ≥4.5:1 on
   white; RAG fills / large graphics ≥3:1.
   ========================================================================== */

/* ── Brand core — real Fresh palette (green-forward, P00-6) ──────────────── */
:root {
  /* Brand core */
  --fresh-green:   #76a85c;  /* signature Fresh sage — brand bar, growth, "fresh" */
  --fresh-green-d: #5e8c47;
  --fresh-green-l: #9bc585;
  --fresh-orange:  #e0913f;  /* warm honey — decorative energy accent */
  --fresh-orange-d:#c97c2e;
  --fresh-pink:    #d96b8f;  /* berry — rewards / delight (decorative) */
  --fresh-pink-d:  #c85980;
  --fresh-purple:  #7d6ba8;  /* lavender — leadership (decorative) */
  --fresh-navy:    #2d5e9e;  /* blue — trust / headers / data */
  --fresh-yellow:  #f2b233;  /* gold — streaks / gamification accents */
  /* Neutrals */
  --ink:#2a2730; --muted:#6b6770; --line:#e7e3ec; --bg:#f6f8f4; --surface:#ffffff;
  /* Semantic / RAG (Green/Amber/Red leadership status — fills are background-only) */
  --rag-green:#5fa36a; --rag-amber:#e6a32e; --rag-red:#d9584a;
  /* System */
  --radius:14px; --radius-sm:9px; --shadow:0 1px 4px rgba(38,33,48,.08);
  --shadow-lg:0 10px 30px rgba(38,33,48,.14); --motion:200ms cubic-bezier(.2,.7,.2,1);
}

/* ── Brand extensions (named tokens not in the core block but required) ──── */
:root {
  /* superadmin "purple-deep" — a deep INDIGO (P00-6 review nudge): pushed bluer
     + darker so it is unmistakably distinct from the leader plum (#6c568f) and
     the area blue (#2d5e9e), not a near-twin muted purple. 10.28:1 on white. */
  --fresh-purple-deep: #343b78;
  --fresh-purple-deep-d: #282d5e;

  /* Per-role accent source values (P00-6). Each ≥4.5:1 on white so white text
     on the fill AND the fill-as-text both clear AA — see the table above. */
  --fresh-member:   #3a7d42;  --fresh-member-d: #2e6835;  /* Fresh green (hero) */
  --fresh-admin:    #1c7f57;  --fresh-admin-d:  #156548;  /* emerald */
  --fresh-leader:   #6c568f;  --fresh-leader-d: #574676;  /* plum */
  --fresh-guest:    #b0532f;  --fresh-guest-d:  #934225;  /* warm terracotta */

  /* AA-legible TEXT shades of the decorative brand colours. Used wherever a
     brand colour must read as small text on white (eyebrows, links, active nav,
     card meta, status-pill text, wrap-card gradients). Each verified ≥4.5:1. */
  --fresh-orange-ink: #a15d18;  /* 5.13:1 on white */
  --fresh-green-ink:  #2f7d3f;  /* 5.09:1 on white */
  --fresh-pink-ink:   #b23a63;  /* 5.71:1 on white */
  --fresh-pink-deep:  #8f2e50;  /* 7.85:1 on white — deeper berry */
  --fresh-purple-d:   #574676;  /* 8.26:1 on white — hover/border for leader plum */
  --fresh-navy-d:     #244e85;  /* 8.39:1 on white — hover/border for area blue */

  /* RAG text shades (the RAG fills are background-only; these read as text) */
  --rag-green-ink: #2f7d4f;  /* 5.04:1 on white */
  --rag-amber-ink: #8a6500;  /* 5.33:1 on white */
  --rag-red-ink:   #c0392b;  /* 5.44:1 on white */

  /* Extra surface tints */
  --surface-2: #fbfafd;      /* faint zebra / hover row */
  --ink-soft: rgba(42,39,48,.72);

  /* ── Typography ──────────────────────────────────────────────────────── */
  /* System stack is the offline fallback; Poppins/Nunito link is optional. */
  --font-head: "Poppins", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-body: "Nunito", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --fw-regular: 400; --fw-medium: 600; --fw-bold: 700; --fw-black: 800;
  --fs-xs: 11px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px;
  --fs-lg: 19px; --fs-xl: 22px; --fs-2xl: 26px; --fs-3xl: 32px;
  --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.55;

  /* ── Spacing scale (4px base) ────────────────────────────────────────── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px;

  /* ── Radii (extends §5 --radius / --radius-sm) ───────────────────────── */
  --radius-lg: 20px; --radius-pill: 999px;

  /* ── Z-index scale ───────────────────────────────────────────────────── */
  --z-base: 1; --z-nav: 20; --z-dropdown: 40; --z-sticky: 30;
  --z-overlay: 80; --z-modal: 90; --z-toast: 100;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --shell-max: 1200px;

  /* Font Awesome "check" glyph as a mask source (P00-6) — lets CSS pseudo-
     elements render the FA check instead of a check text glyph, coloured by the
     element's background-color (a --*-ink token). FA Free 6.7.2 check path. */
  --fa-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
  /* FA "chevron-down" as a mask source (P00-6) — for CSS disclosure carets. */
  --fa-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");

  /* ── Derived per-role accent (DEFAULT = member; remapped below) ──────── */
  --accent:      var(--fresh-member);
  --accent-d:    var(--fresh-member-d);
  --on-accent:   var(--surface);
  --accent-ink:  var(--fresh-member);
}

/* ── Per-role accent remap — flip body[data-role] to re-tint the whole shell
   from ONE variable, zero JS theming (constitution §5, AC2). Every role uses
   white --on-accent + --accent-ink == --accent (all AA ≥4.5, see table above). ─ */
body[data-role="member"] {
  --accent: var(--fresh-member);      /* Fresh green — the hero role */
  --accent-d: var(--fresh-member-d);
  --on-accent: var(--surface);
  --accent-ink: var(--fresh-member);
}
body[data-role="guest"] {
  --accent: var(--fresh-guest);       /* warm terracotta — welcoming, distinct */
  --accent-d: var(--fresh-guest-d);
  --on-accent: var(--surface);
  --accent-ink: var(--fresh-guest);
}
body[data-role="leader"] {
  --accent: var(--fresh-leader);      /* plum */
  --accent-d: var(--fresh-leader-d);
  --on-accent: var(--surface);
  --accent-ink: var(--fresh-leader);
}
body[data-role="area"] {
  --accent: var(--fresh-navy);        /* blue — data/trust */
  --accent-d: var(--fresh-navy-d);
  --on-accent: var(--surface);
  --accent-ink: var(--fresh-navy);
}
body[data-role="admin"] {
  --accent: var(--fresh-admin);       /* emerald */
  --accent-d: var(--fresh-admin-d);
  --on-accent: var(--surface);
  --accent-ink: var(--fresh-admin);
}
body[data-role="superadmin"] {
  --accent: var(--fresh-purple-deep); /* indigo — premium/franchise */
  --accent-d: var(--fresh-purple-deep-d);
  --on-accent: var(--surface);
  --accent-ink: var(--fresh-purple-deep);
}