/* ClickWorker theme — generated from the ORIGINAL Stitch design tokens.
   Light values are byte-identical to the source design; they are simply
   routed through CSS variables so Dark Mode can remap them cleanly. */
:root {
  --cw-surface: 250 248 255;
  --cw-surface-dim: 210 217 244;
  --cw-surface-bright: 250 248 255;
  --cw-surface-container-lowest: 255 255 255;
  --cw-surface-container-low: 242 243 255;
  --cw-surface-container: 234 237 255;
  --cw-surface-container-high: 226 231 255;
  --cw-surface-container-highest: 218 226 253;
  --cw-on-surface: 19 27 46;
  --cw-on-surface-variant: 67 70 85;
  --cw-inverse-surface: 40 48 68;
  --cw-inverse-on-surface: 238 240 255;
  --cw-inverse-primary: 180 197 255;
  --cw-outline: 115 118 134;
  --cw-outline-variant: 195 198 215;
  --cw-surface-tint: 0 83 219;
  --cw-primary: 0 74 198;
  --cw-on-primary: 255 255 255;
  --cw-primary-container: 37 99 235;
  --cw-on-primary-container: 238 239 255;
  --cw-primary-fixed: 219 225 255;
  --cw-primary-fixed-dim: 180 197 255;
  --cw-on-primary-fixed: 0 23 75;
  --cw-on-primary-fixed-variant: 0 62 168;
  --cw-secondary: 0 108 73;
  --cw-on-secondary: 255 255 255;
  --cw-secondary-container: 108 248 187;
  --cw-on-secondary-container: 0 113 77;
  --cw-secondary-fixed: 111 251 190;
  --cw-secondary-fixed-dim: 78 222 163;
  --cw-on-secondary-fixed: 0 33 19;
  --cw-on-secondary-fixed-variant: 0 82 54;
  --cw-tertiary: 148 55 0;
  --cw-on-tertiary: 255 255 255;
  --cw-tertiary-container: 188 72 0;
  --cw-on-tertiary-container: 255 237 230;
  --cw-tertiary-fixed: 255 219 205;
  --cw-tertiary-fixed-dim: 255 181 150;
  --cw-on-tertiary-fixed: 54 15 0;
  --cw-on-tertiary-fixed-variant: 125 45 0;
  --cw-error: 186 26 26;
  --cw-on-error: 255 255 255;
  --cw-error-container: 255 218 214;
  --cw-on-error-container: 147 0 10;
  --cw-background: 250 248 255;
  --cw-on-background: 19 27 46;
  --cw-surface-variant: 218 226 253;
}
.dark {
    --cw-surface: 11 15 23;
    --cw-surface-dim: 11 15 23;
    --cw-surface-bright: 19 27 46;
    --cw-surface-container-lowest: 19 27 46;
    --cw-surface-container-low: 19 27 46;
    --cw-surface-container: 30 41 59;
    --cw-surface-container-high: 30 41 59;
    --cw-surface-container-highest: 36 48 68;
    --cw-on-surface: 248 250 252;
    --cw-on-surface-variant: 148 163 184;
    --cw-inverse-surface: 226 232 240;
    --cw-inverse-on-surface: 30 41 59;
    --cw-inverse-primary: 29 78 216;
    --cw-outline: 100 116 139;
    --cw-outline-variant: 51 65 85;
    --cw-surface-tint: 59 130 246;
    --cw-primary: 59 130 246;
    --cw-on-primary: 255 255 255;
    --cw-primary-container: 37 99 235;
    --cw-on-primary-container: 239 246 255;
    --cw-primary-fixed: 30 58 138;
    --cw-primary-fixed-dim: 29 78 216;
    --cw-on-primary-fixed: 191 219 254;
    --cw-on-primary-fixed-variant: 147 197 253;
    --cw-secondary: 52 211 153;
    --cw-on-secondary: 5 46 22;
    --cw-secondary-container: 6 95 70;
    --cw-on-secondary-container: 167 243 208;
    --cw-secondary-fixed: 6 78 59;
    --cw-secondary-fixed-dim: 5 150 105;
    --cw-on-secondary-fixed: 110 231 183;
    --cw-on-secondary-fixed-variant: 52 211 153;
    --cw-tertiary: 251 146 60;
    --cw-on-tertiary: 67 20 7;
    --cw-tertiary-container: 154 52 18;
    --cw-on-tertiary-container: 254 215 170;
    --cw-tertiary-fixed: 124 45 18;
    --cw-tertiary-fixed-dim: 194 65 12;
    --cw-on-tertiary-fixed: 253 186 116;
    --cw-on-tertiary-fixed-variant: 251 146 60;
    --cw-error: 248 113 113;
    --cw-on-error: 69 10 10;
    --cw-error-container: 127 29 29;
    --cw-on-error-container: 254 202 202;
    --cw-background: 11 15 23;
    --cw-on-background: 248 250 252;
    --cw-surface-variant: 30 41 59;
}

/* ---- Custom motion & interaction layer (design-consistent) ---- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Scroll-reveal (subtle spring lift — matches DESIGN.md "Interactive Lift") */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s cubic-bezier(0.16,1,0.3,1), transform .5s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .06s; }
.reveal[data-delay="2"] { transition-delay: .12s; }
.reveal[data-delay="3"] { transition-delay: .18s; }
.reveal[data-delay="4"] { transition-delay: .24s; }

/* Live-search hairline progress sweep (DESIGN.md micro-accent) */
.search-sweep { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; border-radius: 0 0 0.75rem 0.75rem; opacity: 0; transition: opacity .2s ease; }
.search-sweep.on { opacity: 1; }
.search-sweep::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, #2563eb, #10b981); animation: sweep 1s ease-in-out infinite; }
@keyframes sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

/* Bookmark elastic bounce */
@keyframes bookmarkPop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
.bookmark-pop { animation: bookmarkPop .35s cubic-bezier(0.34,1.56,0.64,1); }

/* Checkbox spring-pop */
@keyframes checkPop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
input[type="checkbox"].cw-check:checked { animation: checkPop .28s cubic-bezier(0.34,1.56,0.64,1); }

/* Progress bars fill on reveal */
.metric-bar > span { display:block; height:100%; width:0; border-radius:9999px; transition: width 1.1s cubic-bezier(0.16,1,0.3,1); }
.metric-bar-track { width:0; transition: width 1.1s cubic-bezier(0.16,1,0.3,1); }

/* Toast enter/exit */
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px) scale(.98); } }
.cw-toast { animation: toastIn .28s cubic-bezier(0.16,1,0.3,1); }
.cw-toast.out { animation: toastOut .25s ease forwards; }

/* Modal */
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.cw-modal-panel { animation: modalIn .3s cubic-bezier(0.16,1,0.3,1); }

/* Count-up figures keep tabular rhythm */
.tabular { font-variant-numeric: tabular-nums; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* Keep the design's hidden scrollbar behaviour, but allow scroll containers */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Focus ring consistent with the primary token */
:focus-visible { outline: 2px solid rgb(var(--cw-primary)); outline-offset: 2px; }