/* WSK Classes Framework v1.1 - Living with Prompts tokens */
/* Variables */

:root {
  --primary-brand-1: #C8F136;
  --primary-brand-2: #536B08;
  --primary-light-1: #FBFAFF;
  --primary-light-2: #EDE9F6;
  --primary-light-3: #C7BED7;
  --primary-dark-1: #0D0B14;
  --primary-dark-2: #544E60;
  --primary-dark-3: #766E80;
  --secondary-brand-1: #7946E3;
  --secondary-brand-2: #5F2EC7;
  --secondary-light-1: #F3ECFF;
  --secondary-dark-1: #231A36;
  --primary-transparent-1: #C8F1361F;
  --error-1: #E0445E;
  --error-light-1: #FDECEF;
  --size-0: 0rem;
  --size-4: 0.25rem;
  --size-8: 0.5rem;
  --size-12: 0.75rem;
  --size-16: 1rem;
  --size-20: 1.25rem;
  --size-24: 1.5rem;
  --size-32: clamp(1.75rem, 1.662rem + 0.376vw, 2rem);
  --size-40: clamp(2.125rem, 1.993rem + 0.563vw, 2.5rem);
  --size-48: clamp(2.5rem, 2.324rem + 0.751vw, 3rem);
  --size-64: clamp(3.25rem, 2.986rem + 1.127vw, 4rem);
  --size-80: clamp(3.875rem, 3.479rem + 1.69vw, 5rem);
  --size-96: clamp(4.5rem, 3.972rem + 2.254vw, 6rem);
  --size-128: clamp(5.8rem, 5.025rem + 3.305vw, 8rem);
  --size-160: clamp(7rem, 5.944rem + 4.507vw, 10rem);
  --title-size-1: clamp(3.3125rem, calc(2.3651rem + 4.2105vw), 5.3125rem);
  --title-size-2: clamp(2.6875rem, calc(2.0658rem + 2.7632vw), 4rem);
  --title-size-3: clamp(2.1875rem, calc(1.7730rem + 1.8421vw), 3.0625rem);
  --title-size-4: clamp(1.8125rem, calc(1.5757rem + 1.0526vw), 2.3125rem);
  --title-size-5: clamp(1.5rem, calc(1.3816rem + 0.5263vw), 1.75rem);
  --title-size-6: clamp(1.25rem, calc(1.2204rem + 0.1316vw), 1.3125rem);
  --title-subtitle: 0.875rem;
  --body-size-l: 1.125rem;
  --body-size-m: 1rem;
  --body-size-s: 0.875rem;
  --heading-font: 'Bricolage Grotesque', system-ui, sans-serif;
  --body-font: Geist, system-ui, sans-serif;
  --mono-font: 'Geist Mono', ui-monospace, monospace;
  --hand-font: Caveat, 'Segoe Script', cursive;
  --button-radius: 9999px;
  --radius-s: 0.375rem;
  --radius-m: 1rem;
  --radius-l: 1.5rem;
}

/* Typography: size */

.title-1 {
  font-size: var(--title-size-1);
  font-weight: 800;
  line-height: 110%;
}

.title-2 {
  font-size: var(--title-size-2);
  font-weight: 800;
  line-height: 115%;
}

.title-3 {
  font-size: var(--title-size-3);
  font-weight: 800;
  line-height: 120%;
}

.title-4 {
  font-size: var(--title-size-4);
  font-weight: 800;
  line-height: 125%;
}

.title-5 {
  font-size: var(--title-size-5);
  font-weight: 800;
  line-height: 130%;
}

.title-6 {
  font-size: var(--title-size-6);
  font-weight: 800;
  line-height: 130%;
}

.sub-title {
  font-size: var(--title-subtitle);
  font-weight: 800;
  line-height: 140%;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.body-l {
  font-size: var(--body-size-l);
  font-weight: 400;
  line-height: 160%;
}

.body-m {
  font-size: var(--body-size-m);
  font-weight: 400;
  line-height: 160%;
}

.body-s {
  font-size: var(--body-size-s);
  font-weight: 400;
  line-height: 160%;
}

.text-link {
  font-weight: 600;
  text-decoration: underline;
}

/* Typography: font family overrides */

.use-heading-font {
  font-family: var(--heading-font);
}

.use-body-font {
  font-family: var(--body-font);
}

/* Typography: color roles */

.heading-on-light {
  color: var(--primary-dark-1);
}

.heading-on-dark {
  color: var(--primary-light-1);
}

.body-on-light {
  color: var(--primary-dark-2);
}

.body-on-dark {
  color: var(--primary-light-2);
}

.detail-on-light {
  color: var(--primary-dark-3);
}

.detail-on-dark {
  color: var(--primary-light-3);
}

.subtitle-on-light {
  color: var(--primary-brand-2);
}

.subtitle-on-dark {
  color: var(--primary-brand-1);
}

.link-on-light {
  color: var(--primary-brand-2);
}

.link-on-light:hover {
  color: var(--primary-dark-1);
}

.link-on-dark {
  color: var(--primary-brand-1);
}

.link-on-dark:hover {
  color: var(--primary-light-1);
}

/* Backgrounds */

.bg-light-1 {
  background-color: var(--primary-light-1);
}

.bg-light-2 {
  background-color: var(--primary-light-2);
}

.bg-light-3 {
  background-color: var(--primary-light-3);
}

.bg-dark-1 {
  background-color: var(--primary-dark-1);
}

.bg-dark-2 {
  background-color: var(--primary-dark-2);
}

.bg-dark-3 {
  background-color: var(--primary-dark-3);
}

.bg-brand-1 {
  background-color: var(--primary-brand-1);
}

.bg-brand-2 {
  background-color: var(--primary-brand-2);
}

/* Buttons */

.btn-solid, .btn-outline, .btn-solid-on-dark, .btn-outline-on-dark {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-20);
  text-decoration: none;
}

.btn-solid {
  padding-top: var(--size-12);
  padding-bottom: var(--size-12);
  padding-left: var(--size-24);
  padding-right: var(--size-24);
  font-size: var(--body-size-m);
  font-weight: 800;
  line-height: 1;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--button-radius);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  color: var(--primary-dark-1);
  background-color: var(--primary-brand-1);
  border-color: var(--primary-brand-1);
}

.btn-solid:hover {
  background-color: var(--primary-brand-2);
  border-color: var(--primary-brand-2);
  color: var(--primary-light-1);
}

.btn-outline {
  padding-top: var(--size-12);
  padding-bottom: var(--size-12);
  padding-left: var(--size-24);
  padding-right: var(--size-24);
  font-size: var(--body-size-m);
  font-weight: 800;
  line-height: 1;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--button-radius);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  color: var(--primary-brand-2);
  background-color: #00000000;
  border-color: var(--primary-brand-1);
}

.btn-outline:hover {
  background-color: var(--primary-brand-1);
  color: var(--primary-dark-1);
}

.btn-solid-on-dark {
  padding-top: var(--size-12);
  padding-bottom: var(--size-12);
  padding-left: var(--size-24);
  padding-right: var(--size-24);
  font-size: var(--body-size-m);
  font-weight: 800;
  line-height: 1;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--button-radius);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  color: var(--primary-dark-1);
  background-color: var(--primary-brand-1);
  border-color: var(--primary-brand-1);
}

.btn-solid-on-dark:hover {
  background-color: #DAFA73;
  border-color: #DAFA73;
}

.btn-outline-on-dark {
  padding-top: var(--size-12);
  padding-bottom: var(--size-12);
  padding-left: var(--size-24);
  padding-right: var(--size-24);
  font-size: var(--body-size-m);
  font-weight: 800;
  line-height: 1;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--button-radius);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  color: var(--primary-light-1);
  background-color: #00000000;
  border-color: var(--primary-light-1);
}

.btn-outline-on-dark:hover {
  background-color: var(--primary-light-1);
  color: var(--primary-dark-1);
}

/* Layout: boxed containers */

.boxed-s {
  padding-left: max(5%, calc((100% - 47.5rem) / 2));
  padding-right: max(5%, calc((100% - 47.5rem) / 2));
}

.boxed-m {
  padding-left: max(5%, calc((100% - 72.5rem) / 2));
  padding-right: max(5%, calc((100% - 72.5rem) / 2));
}

.boxed-l {
  padding-left: max(5%, calc((100% - 78rem) / 2));
  padding-right: max(5%, calc((100% - 78rem) / 2));
}

.boxed-full {
  padding-left: 5%;
  padding-right: 5%;
}

/* Layout: rounded corners */

.rounded-zero {
  border-radius: var(--size-0);
}

.rounded-s {
  border-radius: var(--radius-s);
}

.rounded-m {
  border-radius: var(--radius-m);
}

.rounded-l {
  border-radius: var(--radius-l);
}

.rounded-full {
  border-radius: 9999px;
}

/* Layout: shadow */

.shadow-s {
  box-shadow: 0 2px 8px #0D0B1414;
}

.shadow-m {
  box-shadow: 0 8px 24px #0D0B141F;
}

.shadow-l {
  box-shadow: 0 16px 48px #0D0B1433;
}

/* Layout: divider and hidden */

.divider {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--primary-light-3);
  margin-top: var(--size-40);
  margin-bottom: var(--size-40);
}

.hidden {
  display: none;
}

/* Spacing */

.pad-0 {
  padding: var(--size-0);
}

.pad-4 {
  padding: var(--size-4);
}

.pad-8 {
  padding: var(--size-8);
}

.pad-12 {
  padding: var(--size-12);
}

.pad-16 {
  padding: var(--size-16);
}

.pad-20 {
  padding: var(--size-20);
}

.pad-24 {
  padding: var(--size-24);
}

.pad-32 {
  padding: var(--size-32);
}

.pad-40 {
  padding: var(--size-40);
}

.pad-48 {
  padding: var(--size-48);
}

.pad-64 {
  padding: var(--size-64);
}

.pad-80 {
  padding: var(--size-80);
}

.pad-96 {
  padding: var(--size-96);
}

.pad-128 {
  padding: var(--size-128);
}

.pad-160 {
  padding: var(--size-160);
}

.pad-tb-0 {
  padding-top: var(--size-0);
  padding-bottom: var(--size-0);
}

.pad-tb-4 {
  padding-top: var(--size-4);
  padding-bottom: var(--size-4);
}

.pad-tb-8 {
  padding-top: var(--size-8);
  padding-bottom: var(--size-8);
}

.pad-tb-12 {
  padding-top: var(--size-12);
  padding-bottom: var(--size-12);
}

.pad-tb-16 {
  padding-top: var(--size-16);
  padding-bottom: var(--size-16);
}

.pad-tb-20 {
  padding-top: var(--size-20);
  padding-bottom: var(--size-20);
}

.pad-tb-24 {
  padding-top: var(--size-24);
  padding-bottom: var(--size-24);
}

.pad-tb-32 {
  padding-top: var(--size-32);
  padding-bottom: var(--size-32);
}

.pad-tb-40 {
  padding-top: var(--size-40);
  padding-bottom: var(--size-40);
}

.pad-tb-48 {
  padding-top: var(--size-48);
  padding-bottom: var(--size-48);
}

.pad-tb-64 {
  padding-top: var(--size-64);
  padding-bottom: var(--size-64);
}

.pad-tb-80 {
  padding-top: var(--size-80);
  padding-bottom: var(--size-80);
}

.pad-tb-96 {
  padding-top: var(--size-96);
  padding-bottom: var(--size-96);
}

.pad-tb-128 {
  padding-top: var(--size-128);
  padding-bottom: var(--size-128);
}

.pad-tb-160 {
  padding-top: var(--size-160);
  padding-bottom: var(--size-160);
}

.pad-lr-0 {
  padding-left: var(--size-0);
  padding-right: var(--size-0);
}

.pad-lr-4 {
  padding-left: var(--size-4);
  padding-right: var(--size-4);
}

.pad-lr-8 {
  padding-left: var(--size-8);
  padding-right: var(--size-8);
}

.pad-lr-12 {
  padding-left: var(--size-12);
  padding-right: var(--size-12);
}

.pad-lr-16 {
  padding-left: var(--size-16);
  padding-right: var(--size-16);
}

.pad-lr-20 {
  padding-left: var(--size-20);
  padding-right: var(--size-20);
}

.pad-lr-24 {
  padding-left: var(--size-24);
  padding-right: var(--size-24);
}

.pad-lr-32 {
  padding-left: var(--size-32);
  padding-right: var(--size-32);
}

.pad-lr-40 {
  padding-left: var(--size-40);
  padding-right: var(--size-40);
}

.pad-lr-48 {
  padding-left: var(--size-48);
  padding-right: var(--size-48);
}

.pad-lr-64 {
  padding-left: var(--size-64);
  padding-right: var(--size-64);
}

.pad-lr-80 {
  padding-left: var(--size-80);
  padding-right: var(--size-80);
}

.pad-lr-96 {
  padding-left: var(--size-96);
  padding-right: var(--size-96);
}

.pad-lr-128 {
  padding-left: var(--size-128);
  padding-right: var(--size-128);
}

.pad-lr-160 {
  padding-left: var(--size-160);
  padding-right: var(--size-160);
}

/* Flex direction */

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* Flex alignment */

.flex-align-start {
  align-items: flex-start;
}

.flex-align-center {
  align-items: center;
}

.flex-align-end {
  align-items: flex-end;
}

.flex-align-stretch {
  align-items: stretch;
}

.flex-justify-start {
  justify-content: flex-start;
}

.flex-justify-center {
  justify-content: center;
}

.flex-justify-end {
  justify-content: flex-end;
}

.flex-justify-between {
  justify-content: space-between;
}

/* Gap */

.gap-0 {
  row-gap: var(--size-0);
  column-gap: var(--size-0);
}

.gap-4 {
  row-gap: var(--size-4);
  column-gap: var(--size-4);
}

.gap-8 {
  row-gap: var(--size-8);
  column-gap: var(--size-8);
}

.gap-12 {
  row-gap: var(--size-12);
  column-gap: var(--size-12);
}

.gap-16 {
  row-gap: var(--size-16);
  column-gap: var(--size-16);
}

.gap-20 {
  row-gap: var(--size-20);
  column-gap: var(--size-20);
}

.gap-24 {
  row-gap: var(--size-24);
  column-gap: var(--size-24);
}

.gap-32 {
  row-gap: var(--size-32);
  column-gap: var(--size-32);
}

.gap-40 {
  row-gap: var(--size-40);
  column-gap: var(--size-40);
}


/* Text alignment */

.text-start {
  text-align: start;
}

.text-center {
  text-align: center;
}

.text-end {
  text-align: end;
}

/* Components */

.card {
  background-color: var(--primary-light-1);
  border-width: 1px;
  border-style: solid;
  border-color: var(--primary-light-3);
  border-radius: var(--radius-m);
}

.badge-1 {
  font-size: var(--body-size-s);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding-top: var(--size-4);
  padding-bottom: var(--size-4);
  padding-left: var(--size-12);
  padding-right: var(--size-12);
  border-radius: 9999px;
  display: inline-block;
  background-color: var(--primary-transparent-1);
  color: var(--primary-brand-2);
}

.badge-2 {
  display: inline-block;
  padding: 2.4px var(--size-8);
  border-radius: var(--radius-s);
  background: var(--primary-brand-1);
  color: var(--primary-dark-1);
  font-size: var(--body-size-m);
  font-weight: 600;
  line-height: 1.4;
  transform: rotate(-3deg);
}

@media (prefers-reduced-motion: reduce) {
  .badge-2 { transform: none; }
}

/* Living with Prompts additions (Sep 2026). Classes the site needs on top of WSK v1.1. */

/* Typography: extra fonts and purple roles on light */

.use-mono-font {
  font-family: var(--mono-font);
}

.use-hand-font {
  font-family: var(--hand-font);
  font-weight: 500;
}

.subtitle-purple-on-light {
  color: var(--secondary-brand-2);
}

.link-purple-on-light {
  color: var(--secondary-brand-2);
}

.link-purple-on-light:hover {
  color: var(--primary-dark-1);
}

.error-text {
  color: var(--error-1);
}

/* Buttons: the arrow pill. A purple badge on the left that floods the pill on hover. */

.btn-arrow-light, .btn-arrow-dark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--size-12);
  padding: var(--size-4) var(--size-24) var(--size-4) var(--size-4);
  border: 0;
  border-radius: var(--button-radius);
  font-family: var(--body-font);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 300ms ease, transform 200ms ease;
}

.btn-arrow-light {
  color: var(--primary-dark-1);
  background: linear-gradient(180deg, #FFFFFF, #EFEAFB);
  box-shadow: inset 0 1px 0 #FFFFFFE6, inset 0 -1px 0 #150E2814, 0 4px 16px #6D3BD940;
}

.btn-arrow-dark {
  color: #FFFFFF;
  background: linear-gradient(180deg, #2A1B4D, #150E28);
  box-shadow: inset 0 1px 0 #FFFFFF29, inset 0 -1px 0 #0000004D, 0 4px 16px #17102947;
}

.btn-arrow-light::before, .btn-arrow-dark::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: var(--size-4);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--secondary-brand-1);
  transform: translateY(-50%) scale(1);
  transition: transform 500ms cubic-bezier(0.33, 1, 0.68, 1);
}

.btn-arrow-light:hover::before, .btn-arrow-dark:hover::before {
  transform: translateY(-50%) scale(13);
}

.btn-arrow-light:hover {
  color: #FFFFFF;
}

.btn-arrow-light:active, .btn-arrow-dark:active {
  transform: scale(0.98);
}

.btn-arrow-icon {
  flex: none;
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--secondary-brand-1);
  color: #FFFFFF;
  transition: background-color 250ms ease 50ms, color 250ms ease 50ms;
}

.btn-arrow-icon::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8 3.6l8.4 8.4-8.4 8.4-1.9-1.9 5.2-5.2H2.8v-2.6h13.3l-5.2-5.2 1.9-1.9z'/%3E%3C/svg%3E") center / 45% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8 3.6l8.4 8.4-8.4 8.4-1.9-1.9 5.2-5.2H2.8v-2.6h13.3l-5.2-5.2 1.9-1.9z'/%3E%3C/svg%3E") center / 45% no-repeat;
}

.btn-arrow-light:hover .btn-arrow-icon, .btn-arrow-dark:hover .btn-arrow-icon {
  background-color: #FFFFFF;
  color: var(--secondary-brand-1);
}

.btn-arrow-s {
  gap: var(--size-8);
  padding: var(--size-4) var(--size-16) var(--size-4) 0.3rem;
  font-size: var(--body-size-s);
}

.btn-arrow-s::before, .btn-arrow-s .btn-arrow-icon {
  width: 1.9rem;
  height: 1.9rem;
}

.btn-arrow-s::before {
  left: 0.3rem;
}

@media (prefers-reduced-motion: reduce) {
  .btn-arrow-light::before, .btn-arrow-dark::before, .btn-arrow-icon { transition: none; }
}

/* Components */