/* Thoughtfetti brand theme (Nov 2026). Loaded last, so it wins over the older styles.
   ALL brand colors live in the first block below. Change a value there and the whole app follows.
   Contrast: every text/background pair below meets WCAG AA (4.5:1 for text, 3:1 for icons).
   The bright brand colors (coral, yellow, teal, lavender, pink, sage) are used for fills and accents with dark text on them.
   Their deeper "-text" versions are used when the color itself has to be readable text on cream or white. */
:root[data-theme=thoughtfetti]{
  /* ---- brand palette: tweak these ---- */
  --tf-cream:#FFF8F0;          /* page background */
  --tf-cream2:#FBEEE2;         /* slightly deeper cream: tracks, wells */
  --tf-white:#FFFFFF;          /* cards and surfaces */
  --tf-tint:#FFF4E8;           /* very light cream for inner panels */
  --tf-line:#F0E2D3;           /* borders */
  --tf-ink:#2B2440;            /* main text (deep plum-ink) */
  --tf-ink2:#6B6480;           /* secondary text */
  --tf-coral:#FF6B6B;          /* primary buttons */
  --tf-coral-hover:#E85A5A;    /* primary button hover */
  --tf-coral-text:#B83A3A;     /* coral when it has to be readable text (links) */
  --tf-yellow:#FFC94D;
  --tf-teal:#2EC4B6;
  --tf-teal-text:#0F766E;
  --tf-lavender:#9B8CFF;
  --tf-lavender-text:#5B4BC4;
  --tf-pink:#FF8FB1;
  --tf-pink-text:#B23A66;
  --tf-sage:#7FB69E;           /* done / success fills */
  --tf-sage-text:#3D7A61;      /* done / success as text or thin icons */
  --tf-amber-text:#946200;     /* yellow family as readable text */
  /* soft tints for tags and cards */
  --tf-coral-soft:#FFE8E6;--tf-yellow-soft:#FFF3D6;--tf-teal-soft:#E0F7F4;--tf-lavender-soft:#EEEBFF;--tf-pink-soft:#FFE6EF;--tf-sage-soft:#E6F2EC;

  /* ---- the app's own color names, mapped to the brand ---- */
  --bg:var(--tf-cream);--bg2:var(--tf-cream2);--panel:var(--tf-white);--panel2:var(--tf-tint);--line:var(--tf-line);
  --ink:var(--tf-ink);--mu:var(--tf-ink2);--field:var(--tf-white);
  --acc:var(--tf-coral);--acc2:var(--tf-coral-hover);--onacc:var(--tf-ink);--acct:var(--tf-coral-text);--accs:rgba(255,107,107,.12);
  --hi:var(--tf-lavender);--hi2:var(--tf-lavender-text);--onhi:var(--tf-ink);--his:rgba(155,140,255,.14);--sun:var(--tf-yellow);
  --c1:var(--tf-teal);--c1s:var(--tf-teal-soft);--c2:var(--tf-coral);--c2s:var(--tf-coral-soft);--c3:var(--tf-yellow);--c3s:var(--tf-yellow-soft);
  --c4:var(--tf-lavender);--c4s:var(--tf-lavender-soft);--c5:var(--tf-pink);--c5s:var(--tf-pink-soft);
  --ok:var(--tf-sage-text);--oks:var(--tf-sage-soft);--warn:var(--tf-amber-text);--warns:var(--tf-yellow-soft);--bad:var(--tf-coral-text);--bads:var(--tf-coral-soft);
  --head1:var(--tf-white);--head2:var(--tf-white);--head3:var(--tf-tint);
  --q:var(--tf-teal-text);--qs:var(--tf-teal-soft);--m:var(--tf-lavender-text);--ms:var(--tf-lavender-soft);--b:var(--tf-pink-text);--bs:var(--tf-pink-soft);
  --shadow:0 14px 34px -26px rgba(43,36,64,.35);color-scheme:light}

/* readable coral text (links, small headings) */
[data-theme=thoughtfetti] a,[data-theme=thoughtfetti] .link,[data-theme=thoughtfetti] .v3-locknote a,[data-theme=thoughtfetti] .tag.acc,
[data-theme=thoughtfetti] .seg button.on,[data-theme=thoughtfetti] .iconbtn:hover,[data-theme=thoughtfetti] .backlink:hover{color:var(--acct)}
[data-theme=thoughtfetti] #boot,[data-theme=thoughtfetti] .ut-thinking b{color:var(--ink)}

/* primary buttons: coral with dark text; hover keeps the text readable */
[data-theme=thoughtfetti] .btn.pri,[data-theme=thoughtfetti] .chip.on,[data-theme=thoughtfetti] .ut-days>div.on,[data-theme=thoughtfetti] .bnav .add.dump{background:var(--acc);border-color:var(--acc);color:var(--onacc)}
[data-theme=thoughtfetti] .btn.pri:hover{background:var(--acc);border-color:var(--acc2);box-shadow:0 0 0 2px var(--acc2) inset,0 8px 18px -10px var(--acc2)}

/* category fills: dark text on every accent */
[data-theme=thoughtfetti] .s1,[data-theme=thoughtfetti] .s2,[data-theme=thoughtfetti] .s3,[data-theme=thoughtfetti] .s4,[data-theme=thoughtfetti] .s5,
[data-theme=thoughtfetti] .tile.s1,[data-theme=thoughtfetti] .tile.s2,[data-theme=thoughtfetti] .tile.s3,[data-theme=thoughtfetti] .tile.s4,[data-theme=thoughtfetti] .tile.s5,
[data-theme=thoughtfetti] .qa button[class*=' s']{color:var(--ink)}

/* done checkmarks: sage fill, dark check */
[data-theme=thoughtfetti] .tick{border-color:var(--tf-sage-text)}
[data-theme=thoughtfetti] .tick.on{background:var(--tf-sage);border-color:var(--tf-sage);color:var(--ink)}
[data-theme=thoughtfetti] .ut-task .tick{border-color:var(--ac,var(--tf-sage-text))}
[data-theme=thoughtfetti] .ut-task .tick.on{background:var(--tf-sage);border-color:var(--tf-sage);color:var(--ink)}
[data-theme=thoughtfetti] .ut-step input{accent-color:var(--tf-sage-text)}

/* Today hero and Ta-Da hero: calm white cards with a sprinkle of confetti, not big color blocks */
[data-theme=thoughtfetti] .hero{color:var(--ink);border:1px solid var(--line);
  background:radial-gradient(circle at 92% 18%,var(--tf-yellow) 0 5px,transparent 6px),radial-gradient(circle at 84% 34%,var(--tf-teal) 0 4px,transparent 5px),
  radial-gradient(circle at 96% 46%,var(--tf-pink) 0 4px,transparent 5px),radial-gradient(circle at 78% 12%,var(--tf-lavender) 0 3.5px,transparent 4.5px),
  radial-gradient(circle at 88% 62%,var(--tf-coral) 0 3.5px,transparent 4.5px),var(--panel)}
[data-theme=thoughtfetti] .hero .ey{color:var(--acct)}
[data-theme=thoughtfetti] .hero p{opacity:1;color:var(--mu)}
[data-theme=thoughtfetti] .hero .btn{border-color:var(--line);background:var(--panel2);color:var(--ink)}
[data-theme=thoughtfetti] .hero .btn:hover{background:var(--bg2)}
[data-theme=thoughtfetti] .ut-knot{opacity:.18}
[data-theme=thoughtfetti] .v3-tell{background:var(--acc);color:var(--onacc);box-shadow:0 12px 26px -14px rgba(232,90,90,.7)}
[data-theme=thoughtfetti] .v3-tell:hover{box-shadow:0 0 0 2px var(--acc2) inset,0 12px 26px -14px rgba(232,90,90,.7)}
[data-theme=thoughtfetti] .v3-tell span{background:var(--panel);color:var(--acct)}
[data-theme=thoughtfetti] .v3-type{background:var(--panel2);border-color:var(--line);color:var(--ink)}
[data-theme=thoughtfetti] .v2b-hero{color:var(--ink);border:1px solid var(--line);
  background:radial-gradient(circle at 90% 20%,var(--tf-yellow) 0 6px,transparent 7px),radial-gradient(circle at 80% 40%,var(--tf-teal) 0 5px,transparent 6px),
  radial-gradient(circle at 95% 55%,var(--tf-pink) 0 5px,transparent 6px),radial-gradient(circle at 72% 16%,var(--tf-lavender) 0 4px,transparent 5px),var(--panel)}
[data-theme=thoughtfetti] .v2b-hero .ey{color:var(--acct)}
[data-theme=thoughtfetti] .v2b-big{background:var(--tf-yellow-soft)}
[data-theme=thoughtfetti] .v2b-trophy{background:var(--tf-yellow-soft)}[data-theme=thoughtfetti] .v2b-trophy .ic{color:var(--tf-amber-text)}

/* small round icons on lavender/coral: dark icons for contrast */
[data-theme=thoughtfetti] .v3-micic,[data-theme=thoughtfetti] .v3-askmic{color:var(--ink)}
[data-theme=thoughtfetti] .v3-mic.on .v3-micic{background:var(--acc)}
[data-theme=thoughtfetti] .ut-meter i{background:linear-gradient(90deg,var(--tf-teal),var(--tf-lavender),var(--tf-pink))}

/* version badges and demo switch */
[data-theme=thoughtfetti] .v3-badge,[data-theme=thoughtfetti] .v3-badge.base{background:var(--tf-teal);color:var(--ink)}
[data-theme=thoughtfetti] .v3-badge.pro,[data-theme=thoughtfetti] .v3-badge.plus{background:linear-gradient(135deg,var(--tf-lavender),var(--tf-pink));color:var(--ink)}
[data-theme=thoughtfetti] .v3-tiers button.on{background:var(--acc);color:var(--onacc)}

/* in-app preview of the morning email */
[data-theme=thoughtfetti] .v3-mail{color:var(--ink)}
[data-theme=thoughtfetti] .v3-mailhd{background:var(--tf-cream);border-bottom-color:var(--line)}
[data-theme=thoughtfetti] .v3-mailhd small,[data-theme=thoughtfetti] .v3-mailbd li span,[data-theme=thoughtfetti] .v3-mailft{color:var(--mu)}
[data-theme=thoughtfetti] .v3-mailbd h4{color:var(--acct)}
[data-theme=thoughtfetti] .v3-mailwin{background:var(--tf-sage-soft);color:var(--tf-sage-text)}
[data-theme=thoughtfetti] .v3-mailbtn span{background:var(--acc);color:var(--onacc)}

/* Instagram card in Settings */
[data-theme=thoughtfetti] .ut-igcard{background:linear-gradient(135deg,var(--tf-lavender-soft),var(--tf-pink-soft))!important;color:var(--ink)!important;border:1px solid var(--line)}
[data-theme=thoughtfetti] .ut-igcard *{color:var(--ink)!important}

/* sorting screen: a light confetti burst instead of the spinning ring */
[data-theme=thoughtfetti] .ut-orb{border-radius:0;-webkit-mask:none;mask:none;width:96px;height:96px;
  background:radial-gradient(circle at 50% 12%,var(--tf-coral) 0 5px,transparent 6px),radial-gradient(circle at 86% 32%,var(--tf-yellow) 0 6px,transparent 7px),
  radial-gradient(circle at 80% 78%,var(--tf-teal) 0 5px,transparent 6px),radial-gradient(circle at 44% 90%,var(--tf-pink) 0 5px,transparent 6px),
  radial-gradient(circle at 12% 66%,var(--tf-lavender) 0 6px,transparent 7px),radial-gradient(circle at 18% 22%,var(--tf-sage) 0 4px,transparent 5px),
  radial-gradient(circle at 50% 50%,var(--tf-yellow) 0 4px,transparent 5px);
  animation:tfburst 1.6s ease-out infinite}
[data-theme=thoughtfetti] .ut-orb.sm{width:40px;height:40px;animation:none}
@keyframes tfburst{0%{transform:scale(.35) rotate(0deg);opacity:0}25%{opacity:1}70%{transform:scale(1.08) rotate(40deg);opacity:1}100%{transform:scale(1.2) rotate(55deg);opacity:0}}
body.calm [data-theme=thoughtfetti] .ut-orb,body.calm .ut-orb{animation:none}
/* phones: keep the confetti dots in the corner so they never sit on text */
@media (max-width:700px){
  [data-theme=thoughtfetti] .hero,[data-theme=thoughtfetti] .v2b-hero{background:radial-gradient(circle at 96% 7%,var(--tf-yellow) 0 4px,transparent 5px),radial-gradient(circle at 90% 4%,var(--tf-teal) 0 3px,transparent 4px),radial-gradient(circle at 98% 16%,var(--tf-pink) 0 3px,transparent 4px),var(--panel)}
  [data-theme=thoughtfetti] .ut-knot{display:none}}