/* =============================================================================
   COLOURS. The one file that holds a colour value (custom properties only).
   =============================================================================
   Three sets, chosen by two attributes on <html>:
     data-look   "green" (the default) or "orange": kept on the business (look.js).
     data-mode   "dark": kept on the device (look.js modeFor, lookBoot.js).
                 Absent or "light" is Light, the colours of the two look blocks.
   The look blocks are the boards LD drew for the light app (design_ld, unchanged).
   The dark set takes its colours from LD's dark board (design_ld/compact_13oct), one
   set for both looks, with the values lifted where the board fails WCAG (marked in the
   set; test/theme-tokens.test.js holds every pair).
   Print stays light: the dark set is inside @media screen.
   Names and sizes that are not colours stay in look.css.
   ============================================================================= */

:root[data-look="green"] {
  color-scheme: light;
  --lk-ground: #F6F4EC;
  --lk-paper: #FFFFFF;
  --lk-ink: #1E2420;
  --lk-text-2: #555B57;
  --lk-text-3: #4A4F4B;
  --lk-text-4: #8C978F;
  --lk-chip-ink: #333833;
  --lk-line: #ECE8DC;
  --lk-edge: #E2DED1;
  --lk-input-edge: #8C978F;
  --lk-soft: #F9F7F0;
  --lk-soft-2: #E3E1DA;
  --lk-form: #FCFBF6;
  --lk-link: #22513D;
  --lk-link-hover: #1F5A43;
  --lk-dark: #22513D;
  --lk-dark-2: #2C6249;
  --lk-avatar: #2C6249;
  --lk-dark-edge: #3F7A5E;
  --lk-dark-line: #4F876B;
  --lk-dark-ink-2: #CFE0D6;
  --lk-dark-ink-3: #DCE8E1;
  --lk-dark-bubble: #1A4331;
  --lk-accent: #F2C230;
  --lk-accent-ink: #1E2420;
  --lk-accent-soft: #FBEBB0;
  --lk-focal: #EAF3EC;
  --lk-focal-edge: #CFE2D5;
  --lk-warn-on-dark: #F2C230;
  --lk-stop-on-dark: #FFB4A8;
  --lk-stop: #9F1D14;
  --lk-stop-bg: #FDE8E5;
  --lk-red: #F04438;
  --lk-warn: #6E4500;
  --lk-warn-bg: #FFF1CF;
  --lk-amber: #D97706;
  --lk-ok: #166534;
  --lk-ok-bg: #E6F4EA;
  --lk-green: #16A34A;
  --lk-muted: #333833;
  --lk-muted-bg: #ECE8DC;
  --lk-flag: #9A3412;
  --lk-note-bg: #FFF8DC;
  --lk-note-ink: #5C3A00;
  --lk-said-bg: #E7F8EE;
  --lk-said-ink: #14532D;
  --lk-msg-bg: #E9E4D8;
  --lk-ring: #D9D4C4;
  --lk-scrim: #3A4A42;
  --lk-disabled: #E2DED1;
  --lk-disabled-ink: #6A706B;
  --lk-tint-0-bg: #FFE9DC; --lk-tint-0-ink: #9A3412;
  --lk-tint-1-bg: #E3EEFF; --lk-tint-1-ink: #1D4ED8;
  --lk-tint-2-bg: #E6F4EA; --lk-tint-2-ink: #166534;
  --lk-tint-3-bg: #F1E8FF; --lk-tint-3-ink: #6B21A8;
  --lk-tint-4-bg: #FFF4D6; --lk-tint-4-ink: #854D0E;
  --lk-tint-5-bg: #E0F7F5; --lk-tint-5-ink: #0F766E;
}

:root[data-look="orange"] {
  color-scheme: light;
  --lk-ground: #F3F2EE;
  --lk-paper: #FFFFFF;
  --lk-ink: #111315;
  --lk-text-2: #5B6067;
  --lk-text-3: #4A4F56;
  --lk-text-4: #8A8F96;
  --lk-chip-ink: #33373C;
  --lk-line: #ECEBE6;
  --lk-edge: #DEDCD5;
  --lk-input-edge: #8A8F96;
  --lk-soft: #F7F6F2;
  --lk-soft-2: #E3E1DA;
  --lk-form: #FBFAF7;
  --lk-link: #111315;
  --lk-link-hover: #C2410C;
  --lk-dark: #111315;
  --lk-dark-2: #1E2125;
  --lk-avatar: #2A2D31;
  --lk-dark-edge: #2E3237;
  --lk-dark-line: #3A3E44;
  --lk-dark-ink-2: #B8BCC2;
  --lk-dark-ink-3: #C9CDD2;
  --lk-dark-bubble: #1F3A2C;
  --lk-accent: #FF8A3D;
  --lk-accent-ink: #111315;
  --lk-accent-soft: #FFE3CF;
  --lk-focal: #FDF0E4;
  --lk-focal-edge: #F3D9C2;
  --lk-warn-on-dark: #FFC77A;
  --lk-stop-on-dark: #FF9C94;
  --lk-stop: #B42318;
  --lk-stop-bg: #FEECEB;
  --lk-red: #F04438;
  --lk-warn: #8A5300;
  --lk-warn-bg: #FFF4DE;
  --lk-amber: #D97706;
  --lk-ok: #166534;
  --lk-ok-bg: #E6F4EA;
  --lk-green: #16A34A;
  --lk-muted: #33373C;
  --lk-muted-bg: #ECEBE6;
  --lk-flag: #9A3412;
  --lk-note-bg: #FFF3EA;
  --lk-note-ink: #5C2A0A;
  --lk-said-bg: #E7F8EE;
  --lk-said-ink: #14532D;
  --lk-msg-bg: #E9E4D8;
  --lk-ring: #D6D3CA;
  --lk-scrim: #4D4F52;
  --lk-disabled: #DEDCD5;
  --lk-disabled-ink: #6A6F75;
  --lk-tint-0-bg: #FFE9DC; --lk-tint-0-ink: #9A3412;
  --lk-tint-1-bg: #E3EEFF; --lk-tint-1-ink: #1D4ED8;
  --lk-tint-2-bg: #E6F4EA; --lk-tint-2-ink: #166534;
  --lk-tint-3-bg: #F1E8FF; --lk-tint-3-ink: #6B21A8;
  --lk-tint-4-bg: #FFF4D6; --lk-tint-4-ink: #854D0E;
  --lk-tint-5-bg: #E0F7F5; --lk-tint-5-ink: #0F766E;
}

/* Roles that share another token's colour in Light and need their own in Dark.
   pick:   the selected chip, tab or pill. A dark fill with white ink in Light; a light
           fill in Dark, as the board draws its active pill, so it is never lost on a card.
   on-ink:  ink on a fill that is the ink colour (a selected chip, a stepper number): the opposite of ink.
   ok-on-dark: the word of a good credit state on the dark band.
   on-accent: ink on an accent fill when the link colour was used.
   band-btn:  a white button on the dark band.
   bar-ok, badge, hint, bubble, warn-*, fix-row: parts that were written as one colour. */
:root[data-look] {
  --lk-pick-bg: var(--lk-dark);
  --lk-pick-ink: #FFFFFF;
  --lk-on-ink: #FFFFFF;
  --lk-ok-on-dark: #E7F8EE;
  --lk-on-accent: var(--lk-link);
  --lk-band-btn-bg: #FFFFFF;
  --lk-band-btn-ink: var(--lk-ink);
  --lk-bar-ok: var(--lk-dark);
  --lk-badge-bg: var(--lk-red);
  --lk-badge-ink: #FFFFFF;
  --lk-hint-bg: rgba(255, 255, 255, .7);
  --lk-bubble: #DCF8C6;
  --lk-bubble-edge: rgba(20, 83, 45, .35);
  --lk-warn-edge: #F2C46D;
  --lk-warn-chip: #FFE2A8;
  --lk-fix-row: #FFFBF2;
  --lk-fix-scrim: rgba(58, 74, 66, .72);
  /* Chotu's icon (LD's Chotu board): the tile is the accent, the ink is the look's dark. */
  --lk-chotu-ink: var(--lk-dark);
  --lk-chotu-face: #FFF4E6;
  --lk-chotu-cloth: #FFFFFF;
  --lk-chotu-red: #D9473F;
  --lk-chotu-cheek: #F49AB0;
  /* The Ask Chotu pill: the look's dark in Light, the light pill the Dark board draws. */
  --lk-chotu-pill: var(--lk-dark);
  --lk-chotu-pill-ink: #FFFFFF;
}

/* ================================================================ DARK ==== */
/* The tile colour follows the business's look in Dark too (LD, 16 Oct): the Orange look keeps its orange accent below;
   the Green look keeps its yellow tile with its green ink at night, and everything that shares the tile colour (the
   Orders badge, the primary button, Chotu's tile) follows. This is the one place Dark differs by look. */
@media screen {
  :root[data-look][data-mode="dark"] {
    color-scheme: dark;
    --lk-ground: #0B0D10;
    --lk-paper: #15181D;
    --lk-ink: #F2F3F5;
    --lk-text-2: #B4BAC2;
    --lk-text-3: #9AA1AB;
    --lk-text-4: #868D97;          /* board #7D848E is 4.23 on the inner tile; lifted */
    --lk-chip-ink: #F2F3F5;
    --lk-line: #242931;
    --lk-edge: #2E343D;
    --lk-input-edge: #707782;      /* board #2E343D is 1.4 on the card; a control edge needs 3 */
    --lk-soft: #1E2228;
    --lk-soft-2: #262B33;
    --lk-form: #181B21;
    --lk-link: #F2F3F5;
    --lk-link-hover: #FFB07A;
    --lk-dark: #1A1E24;
    --lk-dark-2: #262B33;
    --lk-avatar: #262B33;
    --lk-dark-edge: #353B45;
    --lk-dark-line: #414854;
    --lk-dark-ink-2: #B8BCC2;
    --lk-dark-ink-3: #C9CDD2;
    --lk-dark-bubble: #1F3A2C;
    --lk-accent: #FF8A3D;
    --lk-accent-ink: #0B0D10;
    --lk-accent-soft: #3A2516;
    --lk-focal: #1B3127;
    --lk-focal-edge: #2C4A3C;
    --lk-warn-on-dark: #FFC266;
    --lk-stop-on-dark: #FF8A80;
    --lk-stop: #FF8A80;
    --lk-stop-bg: #3A1D1C;
    --lk-red: #F04438;
    --lk-warn: #FFC266;
    --lk-warn-bg: #3A2E14;
    --lk-amber: #D97706;
    --lk-ok: #6EE7A0;
    --lk-ok-bg: #15301F;
    --lk-green: #16A34A;
    --lk-muted: #C9CED4;
    --lk-muted-bg: #242931;
    --lk-flag: #FFB07A;
    --lk-note-bg: #3A2516;
    --lk-note-ink: #FFCBA3;
    --lk-said-bg: #133222;
    --lk-said-ink: #9BE9B8;
    --lk-msg-bg: #1E2228;
    --lk-ring: #414854;
    --lk-scrim: #050608;
    --lk-disabled: #242931;
    --lk-disabled-ink: #868D97;
    --lk-pick-bg: #F2F3F5;
    --lk-pick-ink: #0B0D10;
    --lk-on-ink: #0B0D10;
    --lk-ok-on-dark: #9BE9B8;
    --lk-on-accent: #0B0D10;
    --lk-band-btn-bg: #F2F3F5;
    --lk-band-btn-ink: #0B0D10;
    --lk-bar-ok: #F2F3F5;          /* board #1A1E24 on a #242931 track hid the on time share; lifted */
    --lk-badge-bg: #F04438;
    --lk-badge-ink: #0B0D10;       /* board white on #F04438 is 3.76; dark ink is 5.18 */
    --lk-hint-bg: rgba(255, 255, 255, .08);
    --lk-bubble: #133222;
    --lk-bubble-edge: rgba(155, 233, 184, .5);   /* the words box edge on the bubble: 3.6:1, a control edge needs 3 */
    --lk-warn-edge: #6B5320;
    --lk-warn-chip: #4A3A16;
    --lk-fix-row: #2A2314;
    --lk-fix-scrim: rgba(5, 6, 8, .8);
    --lk-chotu-ink: #0B0D10;       /* the Dark board's Chotu: orange tile, near black ink */
    --lk-chotu-face: #FFF4E6;      /* the face, the gamcha and the cheeks are drawn the same in Dark */
    --lk-chotu-cloth: #FFFFFF;
    --lk-chotu-red: #D9473F;
    --lk-chotu-cheek: #F49AB0;
    --lk-chotu-pill: #F2F3F5;
    --lk-chotu-pill-ink: #0B0D10;
    --lk-tint-0-bg: #3A2516; --lk-tint-0-ink: #FFB07A;
    --lk-tint-1-bg: #1A2A45; --lk-tint-1-ink: #8DB4FF;
    --lk-tint-2-bg: #15301F; --lk-tint-2-ink: #6EE7A0;
    --lk-tint-3-bg: #2C1F45; --lk-tint-3-ink: #C9A3FF;
    --lk-tint-4-bg: #3A3015; --lk-tint-4-ink: #F5C66B;
    --lk-tint-5-bg: #123532; --lk-tint-5-ink: #6EE0D3;
  }
  :root[data-look="green"][data-mode="dark"] {
    --lk-accent: #F2C230;
    --lk-accent-soft: #3A3015;
    --lk-chotu-ink: #22513D;
  }
}