/* 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"] {
  /* Measured against #F3FAFE, the page, not against white. Tuned to white
     these were 4.62, 4.70, 4.61 and 4.70; on the ground they are actually
     used on they were 4.38, 4.46, 4.37 and 4.46, and every eyebrow, status
     pill and section label on the light theme failed by the same hair. The
     page is the darker of the two grounds, so it is the one that decides. */
  /* Split by theme, unlike the three below it. One value cannot serve both
     here: the light page needs it dark enough to read on #F3FAFE and the dark
     page needs it light enough to read on #0B0B0C, and the shared value sat
     between the two at 4.38 and 4.00. The others in this block genuinely do
     clear both grounds, so they stay shared. */
  --greent: #1F956A;    /* dark 4.67:1 */
  --orange: #D03800;    /* page 4.70:1 */
  --amber-fill: #A95D00; /* page 4.68:1 */
  --cyan-fill: #0078A5;  /* page 4.69:1 */
}

/* 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;
}
/* Theme tokens, not fixed values.
   These were pinned to the dark inks on the stated grounds that the card is
   drawn on #18181B in both themes. It is not: the panel is var(--card), which
   is #18181B on the dark theme and #FFFFFF on the light one. Measured on the
   light page the braces came out between 2.30:1 and 3.91:1 and the rule
   between them at 1.11:1, which is a near-white line on white paper.

   So they follow the theme, and the ink inside the braces is the text colour
   again rather than a copy of the dark theme's. */
.wb-blanks p:nth-child(1) .wb-b { color: var(--tl-crimson-ink); }
.wb-blanks p:nth-child(2) .wb-b { color: var(--tl-amber-ink); }
.wb-blanks p:nth-child(3) .wb-b { color: var(--tl-green-ink); }
.wb-blanks p:nth-child(4) .wb-b { color: var(--tl-teal-ink); }
.wb-blanks p:nth-child(5) .wb-b { color: var(--tl-blue-ink); }
@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.
   ------------------------------------------------------------------------ */
/* ---- the display palette -------------------------------------------------
   The logo hues for text set large enough that WCAG asks 3:1 rather than 4.5,
   which here means the gradient-clipped headlines and nothing else.

   These headlines had the logo hex written into the gradient, so they said
   the same thing on both themes. On near-black that is right. On the light
   page the amber stop measured 2.18:1 and the cyan 2.28:1, so a headline read
   cleanly up to the word the gradient had reached and then faded out.

   The ink palette below would fix it and cost too much: those are solved for
   4.5:1 on small text and turn a display amber brown. These move only as far
   as 3:1 needs, so the headline keeps the brand's colour.

   Only amber, green and cyan move. Crimson, red and blue already clear 3:1 on
   the page, so they are the logo values in both themes.
   ------------------------------------------------------------------------ */
:root {
  --tl-crimson-disp: #D80012;
  --tl-red-disp:     #FC3600;
  --tl-amber-disp:   #FC9000;
  --tl-green-disp:   #00A25A;
  --tl-cyan-disp:    #00B4EA;
  --tl-blue-disp:    #006CB4;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --greent: #008153;  /* page 4.69:1 */
    --tl-amber-disp: #CC7500;  /* page 3.27:1 */
    --tl-green-disp: #009F58;  /* page 3.27:1 */
    --tl-cyan-disp:  #0095C2;  /* page 3.26:1 */
  }
}
:root[data-theme="light"] {
  --greent: #008153;  /* page 4.69:1 */
  --tl-amber-disp: #CC7500;
  --tl-green-disp: #009F58;
  --tl-cyan-disp:  #0095C2;
}

: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;
}