/* Trash colour tokens, round 3 (palette-r3/, the AD board). Calvin, 3 Nov: "I'm aligned to the thesis"; "I want green and
   hi vis lime to be separate"; "we should be thinking of colors outside of 'purple is for testimonials' -- the brand should
   hopefully survive this wbsite draft". Drop-in: link after src/assets/brand.css. With no attribute it is the pick,
   A · Signal; data-palette="signal|enamel|fluorescent" on <html> or any element switches that subtree.

   BRAND LEVEL (holds beyond the website):
     grounds  --black --paper --white --asphalt (+ --concrete --gravel --silver --hairline --edge)
     green    Trash itself. --green is its lit value for black; --green-day is Trash Green #00A651 for paper and fields
     lime     hi-vis, its own colour: the one thing to see now (focus, selection, the highlighter, a "new" flag)
     the code eight slots for telling things apart: --code-1 ... --code-8 (red, blue, yellow, purple, orange, pink,
              sky, then silver for "other"), each with -day values. A category keeps its slot everywhere; new ones take
              the next free slot.
   Plain colour names (--red, --blue ...) are night values; -day values are for paper. Inside [data-day] the plain names
   turn to their day values on their own.
   ONE APPLICATION: the homepage's work types are a legend on the code (Video 1, Web 2, Brand 3, Testimonials 4); a new
   category gets data-code="5", "6" ... and its colour follows.
   COMPAT: the live page's types.css names (--pal-*, --s-*, --tc on [data-type]/[data-cat]) and the round-2 boards'
   --r2-* names are mapped at the foot. Generated by the AD's gen_palette_r3.py from its data: change the data, re-run. */

/* ---- A · Signal (the pick, and the default): full colour, lit */
:root, :root[data-theme], [data-palette="signal"], :root[data-palette="signal"] {
  --black: #000000; --paper: #F7F7F5; --white: #FFFFFF; --asphalt: #171717; --concrete: #2E2E2E; --gravel: #8C8C8C; --silver: #D2D4D6; --hairline: #1D1D1D; --edge: #3A3A3A;
  /* Trash Green: lit on black, paint on paper. Lime: hi-vis, its own colour */
  --green: #1ED68A; --green-day: #00A651; --lime: #D4F073;
  /* the code, at night (on black) and by day (on paper) */
  --red: #F0283C; --blue: #4493F8; --yellow: #FFC80A; --purple: #B06BFF; --orange: #FF7900; --pink: #FF82B4; --sky: #2CC3F0;
  --red-day: #DC241F; --blue-day: #0019A8; --yellow-day: #FFC80A; --purple-day: #60399E; --orange-day: #FF7900; --pink-day: #9B0058; --sky-day: #039BE5;
  /* the type that sits on each fill: black wherever it passes AA */
  --on-red: #000000; --on-blue: #000000; --on-yellow: #000000; --on-purple: #000000; --on-orange: #000000; --on-pink: #000000; --on-sky: #000000; --on-green: #000000; --on-lime: #000000;
  --on-red-day: #FFFFFF; --on-blue-day: #FFFFFF; --on-yellow-day: #000000; --on-purple-day: #FFFFFF; --on-orange-day: #000000; --on-pink-day: #FFFFFF; --on-sky-day: #000000; --on-green-day: #000000;
}

/* ---- B · Enamel: soft colour, warm */
[data-palette="enamel"], :root[data-palette="enamel"] {
  --black: #000000; --paper: #F7F7F5; --white: #FFFFFF; --asphalt: #171717; --concrete: #2E2E2E; --gravel: #8C8C8C; --silver: #D2D4D6; --hairline: #1D1D1D; --edge: #3A3A3A;
  /* Trash Green: lit on black, paint on paper. Lime: hi-vis, its own colour */
  --green: #83C491; --green-day: #00A651; --lime: #D4F073;
  /* the code, at night (on black) and by day (on paper) */
  --red: #EE7468; --blue: #6E9BF2; --yellow: #F2C94C; --purple: #C69BEB; --orange: #F28E42; --pink: #F3A4BA; --sky: #86CDEB;
  --red-day: #C0392B; --blue-day: #0055C8; --yellow-day: #FFBE00; --purple-day: #640082; --orange-day: #FF5A00; --pink-day: #A0006E; --sky-day: #82C8E6;
  /* the type that sits on each fill: black wherever it passes AA */
  --on-red: #000000; --on-blue: #000000; --on-yellow: #000000; --on-purple: #000000; --on-orange: #000000; --on-pink: #000000; --on-sky: #000000; --on-green: #000000; --on-lime: #000000;
  --on-red-day: #FFFFFF; --on-blue-day: #FFFFFF; --on-yellow-day: #000000; --on-purple-day: #FFFFFF; --on-orange-day: #000000; --on-pink-day: #FFFFFF; --on-sky-day: #000000; --on-green-day: #000000;
}

/* ---- C · Fluorescent: neon colour, loud */
[data-palette="fluorescent"], :root[data-palette="fluorescent"] {
  --black: #000000; --paper: #F7F7F5; --white: #FFFFFF; --asphalt: #171717; --concrete: #2E2E2E; --gravel: #8C8C8C; --silver: #D2D4D6; --hairline: #1D1D1D; --edge: #3A3A3A;
  /* Trash Green: lit on black, paint on paper. Lime: hi-vis, its own colour */
  --green: #00F58A; --green-day: #00A651; --lime: #EAFF00;
  /* the code, at night (on black) and by day (on paper) */
  --red: #FF2E43; --blue: #2F6DFF; --yellow: #FFB000; --purple: #B641FF; --orange: #FF6B00; --pink: #FF48B0; --sky: #00E1FF;
  --red-day: #ED1C24; --blue-day: #2E3192; --yellow-day: #FFF200; --purple-day: #662D91; --orange-day: #F7941E; --pink-day: #EC008C; --sky-day: #00AEEF;
  /* the type that sits on each fill: black wherever it passes AA */
  --on-red: #000000; --on-blue: #000000; --on-yellow: #000000; --on-purple: #000000; --on-orange: #000000; --on-pink: #000000; --on-sky: #000000; --on-green: #000000; --on-lime: #000000;
  --on-red-day: #000000; --on-blue-day: #FFFFFF; --on-yellow-day: #000000; --on-purple-day: #FFFFFF; --on-orange-day: #000000; --on-pink-day: #000000; --on-sky-day: #000000; --on-green-day: #000000;
}

/* ---- roles, recomputed per palette and per surface ---- */
:root, :root[data-theme], [data-palette], [data-day] {
  --ground: var(--black); --ink: var(--paper); --ink-hi: var(--white); --ink-2: var(--silver); --ink-3: var(--gravel);
  --line: var(--concrete); --surface: var(--asphalt);
  --brand: var(--green); --brand-day: var(--green-day); --on-brand: var(--on-green);
  --attention: var(--lime); --on-attention: var(--on-lime);
  --field: var(--green-day); --field-ink: var(--on-green-day);
  --code-1: var(--red); --code-1-day: var(--red-day); --on-code-1: var(--on-red); --on-code-1-day: var(--on-red-day); --code-2: var(--blue); --code-2-day: var(--blue-day); --on-code-2: var(--on-blue); --on-code-2-day: var(--on-blue-day); --code-3: var(--yellow); --code-3-day: var(--yellow-day); --on-code-3: var(--on-yellow); --on-code-3-day: var(--on-yellow-day); --code-4: var(--purple); --code-4-day: var(--purple-day); --on-code-4: var(--on-purple); --on-code-4-day: var(--on-purple-day); --code-5: var(--orange); --code-5-day: var(--orange-day); --on-code-5: var(--on-orange); --on-code-5-day: var(--on-orange-day); --code-6: var(--pink); --code-6-day: var(--pink-day); --on-code-6: var(--on-pink); --on-code-6-day: var(--on-pink-day); --code-7: var(--sky); --code-7-day: var(--sky-day); --on-code-7: var(--on-sky); --on-code-7-day: var(--on-sky-day);
  --code-8: var(--silver); --code-8-day: var(--gravel); --on-code-8: #000000; --on-code-8-day: #000000;
  /* the homepage's legend */
  --type-video: var(--code-1); --type-web: var(--code-2); --type-brand: var(--green); --type-quote: var(--lime);   /* Calvin, 4 Nov: "brand = green, web = blue, video = red"; testimonials "hi-vis lime" */
  /* brand.css's own role names */
  --hl: var(--lime); --cta: var(--green); --cta-ink: var(--on-green);
  /* the scramble: the code only; never green, never lime */
  --spark-1: var(--red); --spark-2: var(--blue); --spark-3: var(--yellow); --spark-4: var(--purple); --spark-5: var(--orange);
  --spark-6: var(--pink); --spark-7: var(--sky); --spark-8: var(--white);
  /* compat: the live page's types.css and sparks.js */
  --pal-black: var(--black); --pal-asphalt: var(--asphalt); --pal-paper: var(--paper); --pal-platform: var(--paper); --pal-rail: var(--gravel);
  --pal-green: var(--green-day); --pal-lime: var(--lime); --pal-red: var(--red); --pal-yellow: var(--yellow); --pal-blue: var(--blue);
  --pal-orange: var(--orange); --pal-pink: var(--pink); --pal-lilac: var(--purple);
  --s-red: var(--red); --s-orange: var(--orange); --s-yellow: var(--yellow); --s-lime: var(--pink); --s-teal: var(--sky);
  --s-cyan: var(--sky); --s-blue: var(--blue); --s-violet: var(--purple); --s-magenta: var(--purple); --s-pink: var(--pink);
  /* compat: the round-2 boards (../r2-tokens/tokens.css) */
  --r2-ground: var(--ground); --r2-ink: var(--ink); --r2-ink-hi: var(--white); --r2-ink-2: var(--silver); --r2-ink-3: var(--gravel);
  --r2-plate: var(--paper); --r2-plate-ink: var(--black); --r2-surface: var(--asphalt);
  --r2-surface-a: color-mix(in srgb, var(--asphalt) 86%, transparent); --r2-surface-b: color-mix(in srgb, var(--asphalt) 96%, transparent);
  --r2-hairline: var(--hairline); --r2-edge: var(--concrete); --r2-edge-2: var(--edge); --r2-shadow: rgba(0, 0, 0, .4);
  --r2-brand: var(--type-brand); --r2-brand-day: var(--code-3-day); --r2-web: var(--type-web); --r2-video: var(--type-video);
  --r2-quote: var(--type-quote); --r2-on-type: var(--black);
  --r2-spark-1: var(--red); --r2-spark-2: var(--orange); --r2-spark-3: var(--yellow); --r2-spark-4: var(--pink); --r2-spark-5: var(--sky);
  --r2-spark-6: var(--blue); --r2-spark-7: var(--blue); --r2-spark-8: var(--purple); --r2-spark-9: var(--purple); --r2-spark-10: var(--white);
}

/* ---- by day: any paper surface (a plate, a paper card, a slide, print). The plain names turn to their day values. ---- */
[data-day] {
  --ground: var(--paper); --ink: var(--asphalt); --ink-2: #5C5C59; --ink-3: #6B6B68; --line: #D8D8D4;
  --green: var(--green-day); --on-green: var(--on-green-day); --brand: var(--green-day); --on-brand: var(--on-green-day);
  --red: var(--red-day); --on-red: var(--on-red-day); --blue: var(--blue-day); --on-blue: var(--on-blue-day); --yellow: var(--yellow-day); --on-yellow: var(--on-yellow-day); --purple: var(--purple-day); --on-purple: var(--on-purple-day); --orange: var(--orange-day); --on-orange: var(--on-orange-day); --pink: var(--pink-day); --on-pink: var(--on-pink-day); --sky: var(--sky-day); --on-sky: var(--on-sky-day);
  --code-8: var(--gravel);
}

/* ---- one application: the homepage's work types (cards carry data-type, the dock's chips data-cat). A new category
   takes the next slot with data-code="5" ... "8". --tc is the type's colour here, --tc-day on paper, --tc-on / --tc-ink the
   type that sits on it (the live page's names). ---- */
[data-type="video"], [data-cat="video"] { --tc: var(--code-1); --tc-day: var(--code-1-day); --tc-on: var(--on-code-1); --tc-ink: var(--on-code-1); }
[data-type="web"], [data-cat="web"]     { --tc: var(--code-2); --tc-day: var(--code-2-day); --tc-on: var(--on-code-2); --tc-ink: var(--on-code-2); }
[data-type="brand"], [data-cat="brand"] { --tc: var(--green); --tc-day: var(--green-day); --tc-on: var(--on-green); --tc-ink: var(--on-green); }
[data-type="quote"], [data-cat="quote"] { --tc: var(--lime); --tc-day: var(--lime); --tc-on: var(--on-lime); --tc-ink: var(--on-lime); }
[data-code="1"] { --tc: var(--code-1); --tc-day: var(--code-1-day); --tc-on: var(--on-code-1); --tc-ink: var(--on-code-1); }
[data-code="2"] { --tc: var(--code-2); --tc-day: var(--code-2-day); --tc-on: var(--on-code-2); --tc-ink: var(--on-code-2); }
[data-code="3"] { --tc: var(--code-3); --tc-day: var(--code-3-day); --tc-on: var(--on-code-3); --tc-ink: var(--on-code-3); }
[data-code="4"] { --tc: var(--code-4); --tc-day: var(--code-4-day); --tc-on: var(--on-code-4); --tc-ink: var(--on-code-4); }
[data-code="5"] { --tc: var(--code-5); --tc-day: var(--code-5-day); --tc-on: var(--on-code-5); --tc-ink: var(--on-code-5); }
[data-code="6"] { --tc: var(--code-6); --tc-day: var(--code-6-day); --tc-on: var(--on-code-6); --tc-ink: var(--on-code-6); }
[data-code="7"] { --tc: var(--code-7); --tc-day: var(--code-7-day); --tc-on: var(--on-code-7); --tc-ink: var(--on-code-7); }
[data-code="8"] { --tc: var(--code-8); --tc-day: var(--code-8-day); --tc-on: var(--on-code-8); --tc-ink: var(--on-code-8); }
[data-cat="all"] { --tc: var(--paper); --tc-day: var(--black); --tc-on: var(--black); --tc-ink: var(--black); }