/* deploy/theme.css — the platform palette, in one place.
 *
 * It did not exist before this file. The palette was copied into a <style>
 * block on every page instead: 61 pages, ~6,000 hardcoded hex values, 267
 * distinct colours for what is really about twenty roles. That is why the
 * portal drifted — three different near-whites for body text, five ambers
 * meaning five different things, and no way to change any of it in one edit.
 *
 * Every token is named for its ROLE, not its colour, so a scheme change is
 * this file and nothing else. Do not add a raw hex to a page; if a role is
 * missing here, add the role here.
 *
 * ── THE ONE RULE THAT KEEPS THIS LEGIBLE ─────────────────────────────────
 * Gold (--accent, kit Gold #FFCF19) means MONEY or ATTENTION. Nothing else.
 * Commission figures, totals, overdue, blocking, the thing to look at now.
 * A plain button, a hover, an active nav row is --text on --surface, never
 * Gold. Break this and Gold stops meaning anything, because --warn is an
 * amber too and the two become the same signal.
 *
 * Jarom, 2026-09-30: kit Gold #FFCF19 is the official gold. It replaced Ore
 * #F5B84A here, in every page that hardcoded it, and in the email templates.
 *
 * Semantic colour (--good / --warn / --crit) is a SEPARATE scale from the
 * accent and does not change when the accent does.
 */

:root{
  /* ── surfaces ───────────────────────────────────────────────────────────
     was #0E1428 ground, #1A2244 card, #0A1628 nav, #131E30 opp card */
  /* Brand constants: the same in light and dark. For artwork that must not
     follow the viewer's theme, e.g. the display-name avatar image. */
  --brand-ink:   #14181C;
  --brand-paper: #F2F0EB;
  /* Document constants: a contract page is white paper in either theme, in
     the Referral Partner Agreement's own colours. Used by the one-page Offer
     Addendum the Vault keeps for each Gigg opted in to (2026-10-12). */
  --doc-paper:   #FFFFFF;
  --doc-text:    #334155;
  --doc-head:    #0D2847;
  --doc-mark:    #2563EB;
  --doc-muted:   #64748B;
  --doc-line:    #DDE3EA;
  --bg:          #14181C;
  --bg-deep:     #0B0E11;
  --surface:     #1A1F25;
  --surface-2:   #0B0E11;
  --surface-3:   #171C21;
  --surface-hi:  #20262C;   /* hover only */

  /* ── lines ─────────────────────────────────────────────────────────────
     was rgba(255,255,255,.04 – .08), inconsistently */
  --line:        rgba(242,240,235,.09);
  --line-strong: rgba(242,240,235,.18);

  /* ── text, brightest to dimmest ────────────────────────────────────────
     was #F1F5F9 / #F8FAFC / #E2E8F0 (three near-whites for one role),
     then #94A3B8, #64748B, #475569, #334155, #1E3355 */
  --text:        #F2F0EB;
  --text-2:      #A8AFB6;
  --text-3:      #7C848C;
  --text-4:      #59616A;
  --text-5:      #3F464D;   /* dimmest — labels that must recede */

  /* ── accent: money and attention, nothing else ─────────────────────── */
  --accent:      #FFCF19;
  --accent-deep: #CCA514;
  --accent-soft: rgba(255,207,25,.09);
  --on-accent:   #14181C;

  /* ── semantic. A separate scale. Does not follow the accent. ───────── */
  --good:        #4FB783;
  --good-deep:   #2F7D57;
  --good-soft:   rgba(79,183,131,.14);
  --warn:        #E0A93F;
  --warn-soft:   rgba(224,169,63,.14);
  --crit:        #D9694F;
  --crit-deep:   #B44A32;
  --crit-soft:   rgba(217,105,79,.14);
  --info:        #6FB6E8;   /* links and email chrome, was #60A5FA */
  --info-soft:   rgba(111,182,232,.14);
  /* CATEGORY, not an accent. Research is the paid pass that goes and looks
     things up, and it needed a hue of its own: Organize owns green, Mine owns
     blue, and --warn could not be used because it sits four percent from Ore in
     dark and is the SAME hex as Ore in light. Violet was already in the dialog
     chrome, so this names what was there rather than inventing a colour. */
  --research:      #A78BFA;
  --research-soft: rgba(167,139,250,.14);

  /* ── the commission ladder ─────────────────────────────────────────────
     ARC / GEN1 / GEN2 / Connector were teal, ore, grey and purple — four
     hues competing in one row. They are one quantity at four removes from
     the agent, so they read as brightness now: nearest is brightest.
     Ore is deliberately NOT in this ladder; it belongs to the total. */
  --t1:          #F2F0EB;   /* ARC — deals you brought */
  --t2:          #B9BFC5;   /* GEN 1 */
  --t3:          #8C939A;   /* GEN 2 */
  --t4:          #6A7178;   /* Connector */

  /* ── role badges ───────────────────────────────────────────────────────
     was teal / purple / ore / lilac. Kept distinguishable without four
     brand-foreign hues. Lead keeps Ore: it is the only role the agent is
     paid differently for, which is money. */
  --badge-admin:     #F2F0EB;
  --badge-manager:   #A8AFB6;
  --badge-lead:      #FFCF19;
  --badge-connector: #7C848C;

  /* ── Bullseye ring — DELIBERATE CARVE-OUT, DO NOT REBRAND ─────────────
     Direct / Connect / Detect / Suspect is a data encoding agents have
     already learned to read, and it is a metal scale on purpose. Recolouring
     it would change what a contact's ring MEANS to the person reading it.
     The brand quicksheet governs the logo, not a chart scale. */
  --ring-direct:  #67E8F9;
  --ring-connect: #F5C542;
  --ring-detect:  #C0C7D1;
  --ring-suspect: #CD7F32;
  /* Ring-pill TEXT. On Ink the ring colour itself reads; on Paper the gold would
     be 1.5:1, so light mode carries deeper inks of the same metals. Gold and
     Bronze must never swap looks: Bronze is not the brand gold (2026-10-14). */
  --ring-connect-ink: #F5C542;
  --ring-suspect-ink: #CD7F32;

  /* ── translucent states. Hover has to sit on any surface, so it is an
     alpha over the ground rather than a solid colour. ─────────────────── */
  --hover:        rgba(242,240,235,.045);
  --hover-strong: rgba(242,240,235,.09);
  --overlay:      rgba(6,8,10,.72);   /* modal backdrops */

  /* ── form + input chrome ─────────────────────────────────────────────── */
  --input-bg:    #0B0E11;
  --radius:      3px;

  --nav-w:       240px;
}

/* Light. One scheme, and the accent goes deep bronze: kit Gold on Paper is
   1.30:1 and the identity kit forbids it. Gold survives wherever it sits on
   an inked surface, which is where the money figures live anyway. */
:root[data-theme="light"]{
  --bg:          #F2F0EB;
  --bg-deep:     #E9E6DF;
  --surface:     #FAF9F6;
  --surface-2:   #E9E6DF;
  --surface-3:   #FAF9F6;
  --surface-hi:  #EFEDE7;

  --line:        rgba(20,24,28,.13);
  --line-strong: rgba(20,24,28,.24);

  --text:        #14181C;
  --text-2:      #454C53;
  --text-3:      #5F666D;
  --text-4:      #868D94;
  --text-5:      #A6ACB2;

  --accent:      #8A5F12;
  --accent-deep: #6E4B0E;
  --accent-soft: rgba(138,95,18,.10);
  --on-accent:   #F2F0EB;

  --good:        #2F7D57;
  --good-deep:   #24603F;
  --good-soft:   rgba(47,125,87,.12);
  --warn:        #8A5F12;
  --warn-soft:   rgba(138,95,18,.12);
  --crit:        #A8412C;
  --crit-deep:   #8B3423;
  --crit-soft:   rgba(168,65,44,.12);
  --info:        #2A6E9E;
  --info-soft:   rgba(42,110,158,.12);
  --research:      #5B3FBF;
  --research-soft: rgba(91,63,191,.12);

  --t1:          #14181C;
  --t2:          #3D444B;
  --t3:          #5F666D;
  --t4:          #868D94;

  --badge-admin:     #14181C;
  --badge-manager:   #454C53;
  --badge-lead:      #8A5F12;
  --badge-connector: #5F666D;

  --hover:        rgba(20,24,28,.05);
  --hover-strong: rgba(20,24,28,.10);
  --overlay:      rgba(20,24,28,.45);

  --input-bg:    #E9E6DF;
  --ring-connect-ink: #7A6200;
  --ring-suspect-ink: #9A4E12;
}

/* There is deliberately NO prefers-color-scheme block. The portal is dark by
   default regardless of the operating system; light is reached only by picking
   it in the account menu. A dark floor also means that if the bootstrap script
   is ever blocked, the page still renders the way the product is meant to look
   rather than inheriting the OS.
   ─────────────────────────────────────────────────────────────────────────── */

/* Outfit, everywhere. Inter is retired for Giggin. Pages still set their own
   font-family in places; this is the floor, not the ceiling. */
body{
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-weight:300;
}
::selection{background:var(--accent);color:var(--on-accent)}

/* ─── FILE INPUTS, EVERYWHERE ──────────────────────────────────────────────
   A bare <input type="file"> renders its button in the OS palette — a white
   "Choose Files" sitting in the middle of a dark card. Four pages already fixed
   it with a .dark-file-input class, which only works when somebody remembers to
   add the class; 18 files carry a file input and most never got one.

   So this targets the ELEMENT, not a class. No page has to opt in, and a new
   page cannot forget. The old class still works — it just does not matter any
   more.

   Both the spec pseudo (::file-selector-button) and the older WebKit one are
   covered so Chrome, Safari and Firefox agree. color-scheme:dark is what stops
   the surrounding "No file chosen" text rendering in the OS colour.           */
input[type=file]{
  color-scheme:dark;
  color:var(--text-3);
  font-family:inherit;
  font-size:13px;
  max-width:100%;
}
input[type=file]::file-selector-button,
input[type=file]::-webkit-file-upload-button{
  background:var(--surface-2);
  color:var(--text);
  border:1px solid var(--line-strong);
  border-radius:8px;
  padding:9px 14px;
  margin-right:12px;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
input[type=file]::file-selector-button:hover,
input[type=file]::-webkit-file-upload-button:hover{
  background:var(--hover);
  border-color:var(--text-3);
}

/* ─── SELECTS, EVERYWHERE ──────────────────────────────────────────────────
   Same failure as the file inputs above, same fix. A bare <select> paints
   itself in the OS palette — a white pill on a dark card. snapshot.html styles
   `.field select`, but "Submitted For" sits in `.info-field`, so it got nothing
   and rendered white on the Innovative snapshot.

   Styling hung off a container class only works while every author remembers
   the container. This targets the ELEMENT, so the floor is correct everywhere
   and a page that wants something different still wins — theme.css is injected
   afterbegin, so a page's own <style> always overrides it.

   appearance:none removes the native control; the chevron is an inline SVG in
   the background so it matches the dark palette instead of the OS one, and it
   is Steel rather than Paper so it reads as chrome, not as content.           */
select{
  appearance:none;
  -webkit-appearance:none;
  background-color:var(--surface-2);
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C848C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:16px;
  color:var(--text);
  border:1px solid var(--line-strong);
  border-radius:8px;
  padding:10px 34px 10px 12px;
  font-family:inherit;
  font-size:14px;
  cursor:pointer;
}
select:focus{outline:none;border-color:var(--text)}
/* The dropdown list itself is drawn by the OS; this is the one hook we get. */
select option{background:var(--surface);color:var(--text)}

/* ── Clickable highlight (Jarom, 2026-09-29) ───────────────────────────────
   Anything that is a button wears the enrichment blue when you hover it or
   tab to it: the same --info ring as the "needs you" callout on Contacts.
   An outline, not a border or background, so it sits on top of every page's
   own button styling without fighting it, and it follows the corner radius. */
button:not(:disabled):hover,
[role="button"]:hover,
input[type="submit"]:not(:disabled):hover,
input[type="button"]:not(:disabled):hover,
a[class*="btn"]:hover,
button:not(:disabled):focus-visible,
[role="button"]:focus-visible,
a[class*="btn"]:focus-visible{
  outline:2px solid var(--info) !important;
  outline-offset:1px;
}
/* Tabs wear the same ring INSIDE the tab (Jarom, 2026-10-05: "make sure they
   can see the whole outline, it looks cheap"). A tab strip scrolls sideways on
   a phone, and a scrolling box clips whatever is drawn outside its children,
   so an outside ring lost its bottom edge on every deal card and Relationship
   Card. Drawn inside, it is whole wherever the tab sits. One list here instead
   of a fix per page; a new tab style joins it by class or by role="tab". */
:is(.tab,.tab-btn,.opp-tab-btn,.dc-tab,.rc-tab,.ptab,.sec-tab,.subtab,.pe-tab,
    .dw-tab,.dani-tab,.ww-tab,.team-tab,.offering-tab,[role="tab"]):is(:hover,:focus-visible){
  outline-offset:-3px !important;
}