/* Plug's colours - every one of them, in one place (12 Oct). style.css and the screens use only these
   variables; nothing else in static/ writes a colour of its own.

   Moved towards TallyPrime so a Tally user feels at home, without copying it: a blue top bar (a darker blue
   when pressed), a light grey-blue ground with white cards, soft blue table headers over a blue rule, a yellow
   highlight on whatever is chosen, red for overdue, amber for disputes and things due soon, green for paid
   and ok. The names are Plug's own from before (navy, ivory, brass), kept so no rule had to change its
   name; what they hold is this theme. The font stays Plug's. A dark version below sets the same names. */
:root {
  /* the frame */
  --bar: #2357A2;               /* the top bar */
  --bar-press: #1A4482;         /* ... pressed */
  --bar-ink: #FFFFFF;           /* words on it */
  --bar-muted: rgba(255, 255, 255, 0.72);
  --bar-line: rgba(255, 255, 255, 0.25);
  --bar-tint: rgba(255, 255, 255, 0.10);
  --ivory: #EBF0F6;             /* the ground: light grey-blue */
  --ivory-deep: #DCE4EE;
  --paper: #FFFFFF;             /* cards */
  --paper-soft: #F6F8FB;
  --ink: #18212F;
  --muted: #5C6676;
  --faint: #8A93A2;
  --line: #D4DCE7;
  --line-soft: #E7ECF2;
  --on-color: #FFFFFF;          /* words on a filled button or badge */

  /* the brand and its buttons: a deep blue for headings and the main button */
  --navy: #1B3A6B;
  --navy-soft: #2A4C82;
  --navy-press: #122A50;
  --btn: #1B3A6B;               /* a filled button, a sent bubble: the deep blue */
  --btn-soft: #2A4C82;
  --btn-press: #122A50;
  /* the accent: amber, for the + and the counts */
  --brass: #C98A00;
  --brass-press: #A77200;
  --brass-soft: #FFF3D3;
  --brass-line: #F0D9A5;
  --focus: rgba(35, 87, 162, 0.55);

  /* tables, as Tally sets them out: soft blue headers over a blue rule */
  --tbl-head-bg: #E2EBF7;
  --tbl-rule: #2357A2;
  /* the highlight on whatever is chosen - a chip, a choice, a toggle */
  --hi-bg: #FFD84A;
  --hi-ink: #18212F;
  /* the line or field a person is on, on the Workspace: Plug's own, never Tally's yellow bar */
  --sel-bg: #D7E4F6;
  --sel-ink: #16345F;
  --sel-line: #2357A2;

  /* what money is doing */
  --danger: #B42318;            /* overdue */
  --danger-bg: #FDECEA;
  --danger-line: #F2C6C1;
  --warn: #8F5600;              /* disputes, due soon */
  --warn-bg: #FFF6E3;
  --warn-line: #F1DCAE;
  --soon: #A15C00;
  --ok: #1E7B45;                /* paid, all right */
  --ok-bg: #E5F3EA;
  --ok-line: #C3E3CF;

  /* the six ageing buckets, Not due to 180+ */
  --b0: #4C9A6A; --b1: #A9B23F; --b2: #E0AE33; --b3: #DE8636; --b4: #CC5536; --b5: #A31F1F;
  /* a Home tile's ageing on its detail screen: one blue, light (0-30 days) to dark (90+) */
  --age0: #C9DAF0; --age1: #8EB0DE; --age2: #4F7DBE; --age3: #1B3A6B;
  /* a chart: up, down and level - the words beside them carry the arrow too, never the colour alone */
  --up: #1E7B45; --down: #B42318; --flat: #8A93A2; --last-year: #CDD5E0;
  /* a share chart's slices: calm and told apart, never red or green; Others the quietest */
  /* ONE COLOUR RULE (tones.py): green in hand / coming in / profit, red going out / loss / the wrong side */
  --amt-pos: #17703F; --amt-neg: #B42318;
  /* voucher-type tags: the words on a tinted ground, a colour per base type */
  --vt-rc-ink: #17663A; --vt-rc-bg: #E3F4E9;   /* Receipt - green */
  --vt-py-ink: #A61B1B; --vt-py-bg: #FCE8E6;   /* Payment - red */
  --vt-sl-ink: #B34700; --vt-sl-bg: #FFE7D4;   /* Sales - orange */
  --vt-pu-ink: #1F4FB8; --vt-pu-bg: #E2EAFB;   /* Purchase - blue */
  --vt-cn-ink: #9C5A12; --vt-cn-bg: #FFF3E3;   /* Credit Note - light orange */
  --vt-dn-ink: #2F6EA8; --vt-dn-bg: #EAF3FB;   /* Debit Note - light blue */
  --vt-ct-ink: #4B5563; --vt-ct-bg: #ECEEF1;   /* Contra - grey */
  --vt-jr-ink: #6B3FA0; --vt-jr-bg: #F1EAFA;   /* Journal - purple */
  --vt-sj-ink: #0F6E66; --vt-sj-bg: #DFF3F1;   /* Stock / Manufacturing - teal */
  --vt-ot-ink: #5C6676; --vt-ot-bg: #EEF1F5;   /* any other type */
  --sh0: #2F5D9E; --sh1: #7A5BA6; --sh2: #C08A2E; --sh3: #4E8DB8; --sh4: #A0628F; --sh5: #5B6B82; --shx: #C3CAD4;

  /* shades */
  --shadow-c: rgba(27, 58, 107, 0.07);
  --shadow-float-c: rgba(27, 58, 107, 0.14);
  --scrim: rgba(16, 26, 44, 0.32);
  --scrim-strong: rgba(16, 26, 44, 0.50);
  --shade: rgba(0, 0, 0, 0.14);
  --viewer-bg: rgba(10, 16, 28, 0.94);
}

/* Dark: the same names, darker values - by the phone's own setting, or chosen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bar: #16345F; --bar-press: #0F2647; --bar-ink: #F2F5FA;
    --bar-muted: rgba(242, 245, 250, 0.70); --bar-line: rgba(242, 245, 250, 0.22); --bar-tint: rgba(242, 245, 250, 0.08);
    --ivory: #0F1622; --ivory-deep: #1A2333; --paper: #172030; --paper-soft: #1C2738;
    --ink: #E6EBF3; --muted: #A3AEBF; --faint: #7F8A9C; --line: #2B3749; --line-soft: #233044; --on-color: #FFFFFF;
    --navy: #9CBEF0; --navy-soft: #B7D0F5; --navy-press: #7FA6E2; --btn: #2F64B4; --btn-soft: #3A72C6; --btn-press: #24508F;
    --brass: #E0A520; --brass-press: #C58E10; --brass-soft: #3A2E12; --brass-line: #5A4718;
    --focus: rgba(156, 190, 240, 0.55);
    --tbl-head-bg: #1F2D44; --tbl-rule: #5C8FDA;
    --hi-bg: #F5CF3F; --hi-ink: #18212F;
    --sel-bg: #1E3657; --sel-ink: #E6EBF3; --sel-line: #5C8FDA;
    --danger: #FF8A80; --danger-bg: #3A1A1A; --danger-line: #5C2A28;
    --warn: #F2B85A; --warn-bg: #352A16; --warn-line: #574320; --soon: #F2B85A;
    --ok: #7FD3A0; --ok-bg: #16301F; --ok-line: #24503A;
    --b0: #5DB07F; --b1: #B8C150; --b2: #E8BB47; --b3: #E8964A; --b4: #DB6A4A; --b5: #C24040;
  --age0: #2C4466; --age1: #3E6699; --age2: #6390CC; --age3: #A9C8F0;
  --up: #7FD3A0; --down: #F08A80; --flat: #7F8A9C; --last-year: #3A4A60;
  --amt-pos: #7FD3A0; --amt-neg: #F49A90;
  --vt-rc-ink: #8FDCAE; --vt-rc-bg: #17352A; --vt-py-ink: #F7A49A; --vt-py-bg: #3E1E1E;
  --vt-sl-ink: #F8AE74; --vt-sl-bg: #3D2816; --vt-pu-ink: #9DBCF7; --vt-pu-bg: #1C2B4A;
  --vt-cn-ink: #F2C891; --vt-cn-bg: #352A1C; --vt-dn-ink: #A6CDF0; --vt-dn-bg: #1D2E3F;
  --vt-ct-ink: #C0C8D3; --vt-ct-bg: #2A323D; --vt-jr-ink: #CBAEF1; --vt-jr-bg: #2F2543;
  --vt-sj-ink: #7FD8CD; --vt-sj-bg: #163632; --vt-ot-ink: #B0BACA; --vt-ot-bg: #262F3B;
  --sh0: #6F9AD8; --sh1: #A98BD4; --sh2: #D8AE5E; --sh3: #7DB6DC; --sh4: #CC8FBB; --sh5: #93A3BA; --shx: #46536A;
    --shadow-c: rgba(0, 0, 0, 0.35); --shadow-float-c: rgba(0, 0, 0, 0.5);
    --scrim: rgba(0, 0, 0, 0.5); --scrim-strong: rgba(0, 0, 0, 0.65); --shade: rgba(0, 0, 0, 0.4);
    --viewer-bg: rgba(0, 0, 0, 0.94);
  }
}
:root[data-theme="dark"] {
  --bar: #16345F; --bar-press: #0F2647; --bar-ink: #F2F5FA;
  --bar-muted: rgba(242, 245, 250, 0.70); --bar-line: rgba(242, 245, 250, 0.22); --bar-tint: rgba(242, 245, 250, 0.08);
  --ivory: #0F1622; --ivory-deep: #1A2333; --paper: #172030; --paper-soft: #1C2738;
  --ink: #E6EBF3; --muted: #A3AEBF; --faint: #7F8A9C; --line: #2B3749; --line-soft: #233044; --on-color: #FFFFFF;
  --navy: #9CBEF0; --navy-soft: #B7D0F5; --navy-press: #7FA6E2; --btn: #2F64B4; --btn-soft: #3A72C6; --btn-press: #24508F;
  --brass: #E0A520; --brass-press: #C58E10; --brass-soft: #3A2E12; --brass-line: #5A4718;
  --focus: rgba(156, 190, 240, 0.55);
  --tbl-head-bg: #1F2D44; --tbl-rule: #5C8FDA;
  --hi-bg: #F5CF3F; --hi-ink: #18212F;
    --sel-bg: #1E3657; --sel-ink: #E6EBF3; --sel-line: #5C8FDA;
  --danger: #FF8A80; --danger-bg: #3A1A1A; --danger-line: #5C2A28;
  --warn: #F2B85A; --warn-bg: #352A16; --warn-line: #574320; --soon: #F2B85A;
  --ok: #7FD3A0; --ok-bg: #16301F; --ok-line: #24503A;
  --b0: #5DB07F; --b1: #B8C150; --b2: #E8BB47; --b3: #E8964A; --b4: #DB6A4A; --b5: #C24040;
  --age0: #2C4466; --age1: #3E6699; --age2: #6390CC; --age3: #A9C8F0;
  --up: #7FD3A0; --down: #F08A80; --flat: #7F8A9C; --last-year: #3A4A60;
  --amt-pos: #7FD3A0; --amt-neg: #F49A90;
  --vt-rc-ink: #8FDCAE; --vt-rc-bg: #17352A; --vt-py-ink: #F7A49A; --vt-py-bg: #3E1E1E;
  --vt-sl-ink: #F8AE74; --vt-sl-bg: #3D2816; --vt-pu-ink: #9DBCF7; --vt-pu-bg: #1C2B4A;
  --vt-cn-ink: #F2C891; --vt-cn-bg: #352A1C; --vt-dn-ink: #A6CDF0; --vt-dn-bg: #1D2E3F;
  --vt-ct-ink: #C0C8D3; --vt-ct-bg: #2A323D; --vt-jr-ink: #CBAEF1; --vt-jr-bg: #2F2543;
  --vt-sj-ink: #7FD8CD; --vt-sj-bg: #163632; --vt-ot-ink: #B0BACA; --vt-ot-bg: #262F3B;
  --sh0: #6F9AD8; --sh1: #A98BD4; --sh2: #D8AE5E; --sh3: #7DB6DC; --sh4: #CC8FBB; --sh5: #93A3BA; --shx: #46536A;
  --shadow-c: rgba(0, 0, 0, 0.35); --shadow-float-c: rgba(0, 0, 0, 0.5);
  --scrim: rgba(0, 0, 0, 0.5); --scrim-strong: rgba(0, 0, 0, 0.65); --shade: rgba(0, 0, 0, 0.4);
  --viewer-bg: rgba(0, 0, 0, 0.94);
}