/* ---------------------------------------------------------------
   supplierism.css
   Single source of truth for the Supplierism design system.
   Previously these tokens were redeclared in all 19 page heads and
   bypassed by 458 hardcoded literals.

   To rebrand: change the values in :root. Nothing else.
   --------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
  /* --- surface --- */
  --cream:        #F1F2F3;
  --cream-deep:   #E6E8EA;

  /* --- text --- */
  --ink:          #1A1A1A;
  --ink-muted:    #5C5852;
  --ink-faint:    #A8A39A;

  /* --- accent --- */
  --amber:        #6ACBF7;   /* Blue   - interactive, selected */
  --amber-deep:   #B98EFF;   /* Purple - secondary fill */
  --terracotta:   #FF7D50;   /* Orange - exception, flagged */

  /* --- rgb channels, for rgba() with variable alpha --- */
  --ink-rgb:         26, 26, 26;
  --amber-rgb:       106, 203, 247;
  --amber-deep-rgb:  185, 142, 255;
  --terracotta-rgb:  255, 125, 80;

  /* --- rules and shadow --- */
  --rule:         rgba(0, 0, 0, 0.1);
  --rule-soft:    rgba(0, 0, 0, 0.08);
  --rule-strong:  rgba(0, 0, 0, 0.15);
  --rule-heavy:   rgba(0, 0, 0, 0.25);
  --shadow:       rgba(0, 0, 0, 0.3);

  /* --- typography --- */
  --serif: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* --- buyer archetype categories (archetype.html, leverage.html) ---
     Three of the nine reuse core accents rather than owning a colour. */
  --arch-guardian:        #D4537E;
  --arch-traditionalist:  #B5532E;
  --arch-steward:         var(--amber-deep);
  --arch-advocate:        #1D9E75;
  --arch-sovereign:       #185FA5;
  --arch-custodian:       #A32D2D;
  --arch-vanguard:        #7F77DD;
  --arch-pragmatist:      var(--ink-muted);
  --arch-citizen:         var(--amber);

  /* --- highlight set (iVirtual highlighter/tab grammar, own palette) --- */
  --link:        #1F4FE0;   /* Cobalt - text links only, 5.76:1 on paper */

  --pal-cream:   #F1E1D3;
  --pal-orange:  #FF7D50;
  --pal-pink:    #F4BFF7;
  --pal-purple:  #B98EFF;
  --pal-yellow:  #F8D05D;
  --pal-blue:    #6ACBF7;

  /* --- supply chain accents (supply-chains.html) --- */
  --fish:        #1F9E6E;   --fish-soft:   #E4F2EC;
  --cotton:      #2F7FD1;   --cotton-soft: #E3EEF9;
  --shea:        #B5790E;   --shea-soft:   #F6ECD6;
  --gas:         #C9502E;   --gas-soft:    #F8E8E2;
  --bread:       #B06B2C;   --bread-soft:  #F4E7D6;

  /* --- one-off --- */
  --hatch: #C77A2E;   /* repeating-gradient hatch, the-bill.html */
}


/* ---------------------------------------------------------------
   HIGHLIGHTER + TAB
   Two devices, used sparingly. Discipline is the point: roughly
   5% of any layout in accent, no more. Black and paper carry
   the rest.
   --------------------------------------------------------------- */

.hl {
  padding: 0.06em 0.28em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hl-blue   { background: var(--pal-blue);   color: var(--ink); }
.hl-orange { background: var(--pal-orange); color: var(--ink); }
.hl-purple { background: var(--pal-purple); color: var(--ink); }
.hl-yellow { background: var(--pal-yellow); color: var(--ink); }
.hl-ink       { background: var(--ink);          color: var(--cream); }

.tab {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: var(--ink);
  color: var(--cream);
  white-space: nowrap;
}
.tab-blue   { background: var(--pal-blue);   color: var(--ink); }
.tab-orange { background: var(--pal-orange); color: var(--ink); }

/* Supplier tags floated into the hero. Hidden on narrow screens
   rather than reflowed - they are texture, not content. */
.hero { position: relative; }
.supplier-tab { position: absolute; z-index: 2; }
@media (max-width: 860px) { .supplier-tab { display: none; } }