/* Palette corrections for the design bundles.
   ==========================================================================
   The .dc.html files carry their own palette, exported from the design tool,
   and it conflates two different jobs: the same token is used as a fill that
   white text sits on AND as a text colour on the page ground. A hue cannot
   do both, and the sweep found it doing neither well:

     white on --greent #00A86B ......... 3.08:1   (a filled pill)
     white on #FF8C00 .................. 2.33:1
     white on #00A3E0 .................. 2.87:1
     white on #FF4500 .................. 3.44:1

   The first attempt at this file darkened the hues so they would work as
   text. That fixed text-on-page and broke ink-on-fill, because the bundle
   draws chips as background:var(--green) with a near-black ink: dark ink on
   the darkened green measured 3.56:1. Trading one failure for another.

   So this darkens only the hues that carry white text, and only far enough
   that white clears 4.5:1 on them. Each stays recognisably the same colour,
   each still works as a fill, and each is now also stronger as text on the
   light page than it was. The hues used as a fill under dark ink are left
   exactly as the bundle exported them.

   This is a patch over a generated file, loaded rather than edited in, so
   that re-exporting the bundle cannot silently drop it. If the bundles are
   ever rebuilt with a fill/ink pair per hue, this file goes.
   ========================================================================== */

:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  /* white now 4.62:1, was 3.08:1 */
  --greent: #008656;
  /* white now 4.70:1, was 3.44:1 */
  --orange: #D63A00;
  /* white now 4.61:1, was 2.33:1 */
  --amber-fill: #B06100;
  /* white now 4.70:1, was 2.87:1 */
  --cyan-fill: #007CAA;
}

/* The app promo and the services rows used to be patched from here, with
   thirteen !important declarations fighting inline styles in the bundle. They
   are fixed inside "Turtle Labs Landing.dc.html" now: the properties that
   needed a breakpoint came off the elements and into that file's own <style>
   block, so there is one place stating the desktop value and the phone value
   and nothing has to shout down anything. */

/* ---- the workbook blanks -------------------------------------------------
   The section described a fill-in-the-blanks workbook and showed none of it,
   which left the left column half empty under the button. These are the
   workbook's own five chapters written as prompts.

   Braces carry the colour, one hue per line through the spectrum; the rule
   between them stays on the text colour. Colour does the signalling and the
   words stay legible, which matters at this size: a gradient across body text
   has to be painted as transparent-with-background-clip, and that is a poor
   trade for eleven words.
   ------------------------------------------------------------------------ */
.wb-blanks { margin: 0 0 26px; display: flex; flex-direction: column; gap: 9px; }
.wb-blanks p {
  margin: 0; font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(13.5px, 1.35vw, 15.5px); line-height: 1.6; color: var(--muted);
}
.wb-blanks .wb-b { font-weight: 800; font-style: normal; white-space: nowrap; }
/* The rule inside the braces: the text colour, not the brace colour. */
.wb-blanks .wb-b i {
  font-style: normal; font-weight: 400; color: var(--text);
  letter-spacing: 0.06em; padding: 0 1px;
}
/* Fixed values, not theme tokens.
   This card is drawn on #18181B in both themes: it is a dark feature panel on
   a light page, which is why the bundle's own heading and lede on it are
   near-white and still read at 16:1 and 6.9:1 when the rest of the page goes
   light. Wiring the braces to the theme therefore did the wrong thing: on the
   light theme they took the light inks, which are dark colours, and sat on a
   dark card at 3.6:1. The ground never changes, so neither should these. */
.wb-blanks p:nth-child(1) .wb-b { color: #E44D59; }
.wb-blanks p:nth-child(2) .wb-b { color: #FC9000; }
.wb-blanks p:nth-child(3) .wb-b { color: #00A25A; }
.wb-blanks p:nth-child(4) .wb-b { color: #00B08C; }
.wb-blanks p:nth-child(5) .wb-b { color: #2F87C2; }
/* The rule inside the braces follows the same logic: always the light ink. */
.wb-blanks .wb-b i { color: #F6F3EC; }
@media (max-width: 640px) {
  .wb-blanks { gap: 7px; margin-bottom: 20px; }
  .wb-blanks p { font-size: 13px; }
}

/* ---- the brand ink palette, for the bundle pages -------------------------
   The bundles do not load tl-system.css, so --tl-*-ink was unset here and
   anything reading it fell through to its literal fallback: a light-theme
   value, used on both themes. Every brace in the workbook blanks measured
   between 3.56:1 and 3.94:1 against the dark ground, and identically against
   the light one, which is the giveaway that no theme was being applied at all.

   Same values as tl-system.css and webos.css, per theme. Declared last in
   this file so it wins over the fallbacks in the component library.
   ------------------------------------------------------------------------ */
:root {
  --tl-crimson-ink: #E44D59;
  --tl-red-ink:     #FC3600;
  --tl-amber-ink:   #FC9000;
  --tl-green-ink:   #00A25A;
  --tl-cyan-ink:    #00B4EA;
  --tl-blue-ink:    #2F87C2;
  --tl-teal-ink:    #00B08C;
  --tl-indigo-ink:  #6285D2;
  --tl-violet-ink:  #9F76D2;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --tl-crimson-ink: #D80012;
    --tl-red-ink:     #D82E00;
    --tl-amber-ink:   #A55E00;
    --tl-green-ink:   #007F47;
    --tl-cyan-ink:    #00799D;
    --tl-blue-ink:    #006CB4;
    --tl-teal-ink:    #007A61;
    --tl-indigo-ink:  #4B6AAD;
    --tl-violet-ink:  #7C5AA8;
  }
}
:root[data-theme="light"] {
  --tl-crimson-ink: #D80012;
  --tl-red-ink:     #D82E00;
  --tl-amber-ink:   #A55E00;
  --tl-green-ink:   #007F47;
  --tl-cyan-ink:    #00799D;
  --tl-blue-ink:    #006CB4;
  --tl-teal-ink:    #007A61;
  --tl-indigo-ink:  #4B6AAD;
  --tl-violet-ink:  #7C5AA8;
}