@charset "utf-8";

/* JUSTWORK DNA — canonical palette. Do not substitute another green. */
html:root {
  --theme: 19, 181, 97;       /* #13B561 — Brand */
  --master: 252, 252, 252;    /* #FCFCFC — Master */
  --primary: 108, 117, 125;   /* #6C757D — Primary neutral */
  --secondary: 248, 249, 250; /* #F8F9FA — Secondary surface */
  --black: 0, 0, 0;          /* #000000 — Dark canvas */
  --white: 255, 255, 255;    /* #FFFFFF — Light canvas */
  --green: var(--theme);
  --success: var(--theme);
  --light: var(--secondary);
  --dark: var(--black);
  --jw-canvas: var(--white);
  --jw-surface: var(--master);
  --jw-panel: var(--secondary);
  --jw-text: var(--black);
  --jw-muted: var(--primary);
  --jw-border: 108, 117, 125;
  --jw-border-alpha: .22;
  color-scheme: light;
  accent-color: rgb(var(--theme));
  background: rgb(var(--jw-canvas));
  color: rgb(var(--jw-text));
}

html:root[data-jw-theme="dark"] {
  --jw-canvas: var(--black);
  --jw-surface: var(--black);
  --jw-panel: 0, 0, 0;
  --jw-text: var(--master);
  --jw-border-alpha: .5;
  color-scheme: dark;
}

html:root[data-jw-theme="light"] { color-scheme: light; }

html body {
  background-color: rgb(var(--jw-canvas));
  color: rgb(var(--jw-text));
}

/* Intentionally dark components keep their own contrast in either mode. */
.jw-inverse {
  --jw-surface: var(--black);
  --jw-panel: 0, 0, 0;
  --jw-text: var(--master);
  --jw-border-alpha: .5;
  color-scheme: dark;
  background-color: rgb(var(--black));
  color: rgb(var(--master));
}

::selection { background: rgb(var(--theme)); color: rgb(var(--black)); }

/* Restore visible keyboard focus even where legacy utilities remove outlines. */
html body :focus-visible {
  outline: 2px solid rgb(var(--jw-text));
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(var(--theme), .35);
}

.jw-site-logo {
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: contain;
}
.jw-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: rgb(var(--primary));
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.jw-theme-toggle:hover {
  background: rgba(var(--theme), .1);
  color: rgb(var(--jw-text));
}
.jw-theme-toggle:focus-visible {
  outline-color: rgb(var(--primary));
  box-shadow: 0 0 0 2px rgba(var(--theme), .3);
}
.jw-theme-toggle .material-icons-round {
  font-size: 24px;
  line-height: 1;
  pointer-events: none;
}
.jw-theme-toggle .jw-theme-icon-dark { display: block; }
.jw-theme-toggle .jw-theme-icon-light { display: none; }
html[data-jw-theme="dark"] .jw-theme-icon-dark { display: none; }
html[data-jw-theme="dark"] .jw-theme-icon-light { display: block; }

/* Requested button treatment: brand green with white text in both themes. */
html body :is(.jw-brand-action, .package-add-btn) {
  background: rgb(var(--theme));
  border-color: rgb(var(--theme));
  color: rgb(var(--white));
}
html body :is(.jw-brand-action, .btn-start-now, .package-add-btn.bg-blue-600),
html body :is(button, a, label, div, span)[class~="bg-blue-600"][class~="text-white"],
html body :is(button, a)[class~="bg-green-600"][class~="text-white"] {
  color: rgb(var(--white));
}
html body .btn-start-now {
  background: rgb(var(--theme));
  color: rgb(var(--white));
}
html body .text-white:is(
  .bg-blue-500, .bg-blue-600, .bg-blue-700,
  .bg-purple-500, .bg-purple-600, .bg-purple-700,
  .bg-indigo-500, .bg-indigo-600, .bg-indigo-700,
  .bg-green-500, .bg-green-600, .bg-green-700,
  .bg-emerald-500, .bg-emerald-600, .bg-emerald-700,
  .bg-teal-500, .bg-teal-600, .bg-teal-700,
  .bg-cyan-500, .bg-cyan-600, .bg-cyan-700,
  .bg-sky-500, .bg-sky-600, .bg-sky-700,
  .bg-pink-500, .bg-pink-600, .bg-pink-700,
  .bg-fuchsia-500, .bg-fuchsia-600, .bg-fuchsia-700,
  .bg-violet-500, .bg-violet-600, .bg-violet-700
) { color: rgb(var(--white)); }
html body .jw-brand-action:hover,
html body .btn-start-now:hover { box-shadow: 0 4px 20px rgba(var(--theme), .25); }

html body .jw-brand-mark {
  color: rgb(var(--theme));
  -webkit-text-fill-color: currentColor;
  background: none;
}
html body .active-nav-item {
  color: rgb(var(--jw-text));
  text-decoration: underline;
  text-decoration-color: rgb(var(--theme));
  text-decoration-thickness: 3px;
  text-underline-offset: .55em;
}

html body .hero-bg-shape {
  background: radial-gradient(ellipse at top, rgba(var(--theme), .10), rgba(var(--theme), 0) 70%);
}
html body .typewriter-cursor { color: rgb(var(--theme)); }
html body #typewriter-text {
  text-decoration: underline;
  text-decoration-color: rgb(var(--theme));
  text-decoration-thickness: .045em;
  text-underline-offset: .13em;
}
html body .bg-light-blue-section { background-color: rgb(var(--jw-panel)); }
html body .loader-overlay { background: rgb(var(--jw-canvas)); }
html body .spinner { border-color: rgba(var(--primary), .2); border-top-color: rgb(var(--theme)); }
html body .click-hint-toast { background: rgba(var(--theme), .12); color: rgb(var(--jw-text)); }
html body .dock-btn { color: rgb(var(--primary)); }
html body .dock-btn:hover { background: rgba(var(--primary), .15); color: rgb(var(--jw-text)); }
html body .dock-btn.active { background: rgb(var(--theme)); color: rgb(var(--white)); }
html body .text-google-blue { color: rgb(var(--jw-text)); }
html body .bg-google-blue { background: rgb(var(--theme)); color: rgb(var(--white)); }
html body .hover\:bg-google-blue-dark:hover { background: rgb(var(--theme)); }

/* Legacy admin utilities share the same semantic surfaces as Tailwind pages. */
html body :is(.bg-white, .link-bg-white) { background-color: rgb(var(--jw-surface)); }
html body .bg-master { background-color: rgb(var(--jw-surface)); }
html body .bg-secondary { background-color: rgb(var(--jw-panel)); }
html body .color-master { color: rgb(var(--jw-text)); }
html body .color-black { color: rgb(var(--jw-text)); }
html body .color-primary { color: rgb(var(--primary)); }
html body :is(.bg-master, .bg-secondary).color-white { color: rgb(var(--jw-text)); }
html body :is(.btn-theme, .bg-theme.color-white, .link-bg-theme.color-white) { color: rgb(var(--white)); text-shadow: none; }
html body .jw-inverse :is(.text-gray-200, .text-gray-300, .text-slate-200, .text-slate-300) { color: rgb(var(--master)); }
html body #cookie-consent a { color: rgb(var(--master)); text-decoration-color: rgb(var(--theme)); }

/* Older decorative classes keep their names, with the current brand colors. */
html body :is(.cus-promotion, .box-gradient-animation) {
  background: linear-gradient(135deg, rgba(var(--theme), .2), rgba(var(--theme), .06));
  color: rgb(var(--jw-text));
}
html body .gradient-txt-pink-gold {
  background: none;
  color: rgb(var(--jw-text));
  -webkit-text-fill-color: currentColor;
  text-decoration: underline;
  text-decoration-color: rgb(var(--theme));
}
html body .btn-link-unline::after { background: rgb(var(--theme)); }

@media (forced-colors: active) {
  html body .jw-brand-mark { color: LinkText; -webkit-text-fill-color: LinkText; }
  html body .active-nav-item { text-decoration-color: LinkText; }
  html body :focus-visible,
  .jw-theme-toggle:focus-visible { outline: 2px solid Highlight; }
}

@media print {
  html:root, html:root[data-jw-theme] {
    --jw-canvas: var(--white);
    --jw-surface: var(--white);
    --jw-panel: var(--secondary);
    --jw-text: var(--black);
    color-scheme: light;
  }
}