/* src/theme-tokens.css */
/*
  UXPIN THEME TOKENS - integrated with the Wire theme editor.
  This file is the single source of truth for the design: every color, font,
  radius and shadow lives here as a CSS variable.
  KEEP THE STRUCTURE: exactly one "html:root:not(.dark)" block (light scheme)
  and one "html:root.dark" block (dark scheme), one "--token: value;" per line.
  Change VALUES or add/remove token lines - never rename or merge the blocks.
*/
html:root:not(.dark) {
  --mui-palette-primary-main: #1C1A17;
  --mui-palette-primary-mainChannel: 28 26 23;
  --mui-palette-primary-dark: #000000;
  --mui-palette-primary-light: #4A453E;
  --mui-palette-primary-contrastText: #FBF7EF;
  --mui-palette-secondary-main: #C2622F;
  --mui-palette-secondary-mainChannel: 194 98 47;
  --mui-palette-secondary-dark: #9C4C21;
  --mui-palette-secondary-light: #E08A55;
  --mui-palette-secondary-contrastText: #FBF7EF;
  --mui-palette-info-main: #6F90B0;
  --mui-palette-info-mainChannel: 111 144 176;
  --mui-palette-warning-main: #E8965A;
  --mui-palette-warning-mainChannel: 232 150 90;
  --mui-palette-success-main: #86A968;
  --mui-palette-success-mainChannel: 134 169 104;
  --mui-palette-background-default: #F7F2E7;
  --mui-palette-background-paper: #FBF7EF;
  --mui-palette-text-primary: #1C1A17;
  --mui-palette-text-secondary: #6B6355;
  --mui-palette-divider: rgba(28, 26, 23, 0.16);
  --mui-palette-common-onBackgroundChannel: 28 26 23;
  --mui-palette-grey-50: #FBF7EF;
  --mui-palette-grey-100: #F2ECDF;
  --mui-palette-grey-200: #E4DCCA;
  --mui-palette-grey-300: #CFC5AE;
  --mui-palette-grey-500: #9A9081;
  --mui-palette-grey-700: #6B6355;
  --mui-palette-grey-900: #1C1A17;

  --mui-font-family: "Instrument Sans", "Helvetica", sans-serif;
  --mui-font-family-h1: "Caveat", "Bricolage Grotesque", cursive;
  --mui-font-family-h2: "Caveat", "Bricolage Grotesque", cursive;
  --mui-font-family-h3: "Caveat", "Bricolage Grotesque", cursive;
  --mui-font-family-h4: "Caveat", "Bricolage Grotesque", cursive;
  --mui-font-family-h5: "Fraunces", Georgia, serif;
  --mui-font-family-h6: "Fraunces", Georgia, serif;
  --mui-font-family-overline: "JetBrains Mono", monospace;
  --mui-font-family-caption: "JetBrains Mono", monospace;
  --mui-font-family-button: "JetBrains Mono", monospace;

  --mui-font-size-h1: clamp(3.5rem, 11vw, 9.5rem);
  --mui-font-size-h2: clamp(2.75rem, 7.5vw, 6rem);
  --mui-font-size-h3: clamp(2rem, 4.5vw, 3.5rem);
  --mui-font-size-h4: clamp(1.6rem, 3vw, 2.5rem);
  --mui-font-size-h5: clamp(1.15rem, 1.9vw, 1.6rem);
  --mui-font-size-body1: clamp(1rem, 1.25vw, 1.15rem);
  --mui-font-size-overline: 0.72rem;
  --mui-font-size-button: 0.8rem;

  --mui-font-weight-h1: 700;
  --mui-font-weight-h2: 700;
  --mui-font-weight-h3: 700;
  --mui-font-weight-h4: 700;
  --mui-font-weight-h5: 400;
  --mui-font-weight-body1: 400;
  --mui-font-lineHeight-h1: 0.92;
  --mui-font-lineHeight-h2: 0.96;
  --mui-font-lineHeight-h3: 1.05;
  --mui-font-lineHeight-h5: 1.55;
  --mui-font-lineHeight-body1: 1.7;

  --mui-shape-borderRadius: 2px;
  --mui-comp-button-radius: 999px;
  --mui-comp-button-text-transform: uppercase;
  --mui-comp-button-font: "JetBrains Mono", monospace;
  --mui-comp-button-shadow: none;
  --mui-comp-button-shadow-hover: none;
  --mui-comp-button-shadow-active: none;
  --mui-comp-button-hover-transform: translateY(-2px) rotate(-0.6deg);
  --mui-comp-button-active-transform: translateY(1px);
  --mui-comp-button-border-width: 2px;
  --mui-comp-button-border-color: var(--mui-palette-primary-main);
  --mui-comp-paper-radius: 2px;

  --ds-accent: #C2622F;
  --ds-accent-contrast: #FBF7EF;
  --ds-surface-alt: #F2ECDF;
  --ds-surface-alt-text: #1C1A17;
  --ds-decor-1: #7C9A8E;
  --ds-decor-2: #D8B24A;
  --ds-ink-soft: rgba(28, 26, 23, 0.55);
  --ds-border: 2px solid var(--mui-palette-primary-main);
  --ds-texture: radial-gradient(rgba(28, 26, 23, 0.055) 1px, transparent 1.1px);
  --ds-overlay: rgba(251, 247, 239, 0.82);
  --ds-shadow-hard: 4px 4px 0 rgba(28, 26, 23, 0.85);
  --ds-glow: 0 0 0 rgba(0, 0, 0, 0);
  --ds-mono-font: "JetBrains Mono", monospace;
}
html:root.dark {
  --mui-palette-primary-main: #F2ECDF;
  --mui-palette-primary-mainChannel: 242 236 223;
  --mui-palette-primary-dark: #CFC5AE;
  --mui-palette-primary-light: #FFFFFF;
  --mui-palette-primary-contrastText: #14120F;
  --mui-palette-secondary-main: #E08A55;
  --mui-palette-secondary-mainChannel: 224 138 85;
  --mui-palette-secondary-dark: #C2622F;
  --mui-palette-secondary-light: #F0A77A;
  --mui-palette-secondary-contrastText: #14120F;
  --mui-palette-info-main: #8AA8C6;
  --mui-palette-info-mainChannel: 138 168 198;
  --mui-palette-warning-main: #F0A874;
  --mui-palette-warning-mainChannel: 240 168 116;
  --mui-palette-success-main: #9CBD80;
  --mui-palette-success-mainChannel: 156 189 128;
  --mui-palette-background-default: #14120F;
  --mui-palette-background-paper: #1C1A17;
  --mui-palette-text-primary: #F2ECDF;
  --mui-palette-text-secondary: #A79E8D;
  --mui-palette-divider: rgba(242, 236, 223, 0.18);
  --mui-palette-common-onBackgroundChannel: 242 236 223;
  --mui-palette-grey-50: #1C1A17;
  --mui-palette-grey-100: #24211C;
  --mui-palette-grey-200: #332F28;
  --mui-palette-grey-300: #4A453E;
  --mui-palette-grey-500: #8A8171;
  --mui-palette-grey-700: #A79E8D;
  --mui-palette-grey-900: #F2ECDF;

  --mui-font-family: "Instrument Sans", "Helvetica", sans-serif;
  --mui-font-family-h1: "Caveat", "Bricolage Grotesque", cursive;
  --mui-font-family-h2: "Caveat", "Bricolage Grotesque", cursive;
  --mui-font-family-h3: "Caveat", "Bricolage Grotesque", cursive;
  --mui-font-family-h4: "Caveat", "Bricolage Grotesque", cursive;
  --mui-font-family-h5: "Fraunces", Georgia, serif;
  --mui-font-family-h6: "Fraunces", Georgia, serif;
  --mui-font-family-overline: "JetBrains Mono", monospace;
  --mui-font-family-caption: "JetBrains Mono", monospace;
  --mui-font-family-button: "JetBrains Mono", monospace;

  --mui-font-size-h1: clamp(3.5rem, 11vw, 9.5rem);
  --mui-font-size-h2: clamp(2.75rem, 7.5vw, 6rem);
  --mui-font-size-h3: clamp(2rem, 4.5vw, 3.5rem);
  --mui-font-size-h4: clamp(1.6rem, 3vw, 2.5rem);
  --mui-font-size-h5: clamp(1.15rem, 1.9vw, 1.6rem);
  --mui-font-size-body1: clamp(1rem, 1.25vw, 1.15rem);
  --mui-font-size-overline: 0.72rem;
  --mui-font-size-button: 0.8rem;

  --mui-font-weight-h1: 700;
  --mui-font-weight-h2: 700;
  --mui-font-weight-h3: 700;
  --mui-font-weight-h4: 700;
  --mui-font-weight-h5: 400;
  --mui-font-weight-body1: 400;
  --mui-font-lineHeight-h1: 0.92;
  --mui-font-lineHeight-h2: 0.96;
  --mui-font-lineHeight-h3: 1.05;
  --mui-font-lineHeight-h5: 1.55;
  --mui-font-lineHeight-body1: 1.7;

  --mui-shape-borderRadius: 2px;
  --mui-comp-button-radius: 999px;
  --mui-comp-button-text-transform: uppercase;
  --mui-comp-button-font: "JetBrains Mono", monospace;
  --mui-comp-button-shadow: none;
  --mui-comp-button-shadow-hover: none;
  --mui-comp-button-shadow-active: none;
  --mui-comp-button-hover-transform: translateY(-2px) rotate(-0.6deg);
  --mui-comp-button-active-transform: translateY(1px);
  --mui-comp-button-border-width: 2px;
  --mui-comp-button-border-color: var(--mui-palette-primary-main);
  --mui-comp-paper-radius: 2px;

  --ds-accent: #E08A55;
  --ds-accent-contrast: #14120F;
  --ds-surface-alt: #24211C;
  --ds-surface-alt-text: #F2ECDF;
  --ds-decor-1: #7C9A8E;
  --ds-decor-2: #D8B24A;
  --ds-ink-soft: rgba(242, 236, 223, 0.55);
  --ds-border: 2px solid var(--mui-palette-primary-main);
  --ds-texture: radial-gradient(rgba(242, 236, 223, 0.05) 1px, transparent 1.1px);
  --ds-overlay: rgba(20, 18, 15, 0.82);
  --ds-shadow-hard: 4px 4px 0 rgba(242, 236, 223, 0.8);
  --ds-glow: 0 0 0 rgba(0, 0, 0, 0);
  --ds-mono-font: "JetBrains Mono", monospace;
}


/* src/styles/sketchworld.css */
/* ── The sketchbook world: paper, layers, reveals ─────────────────────── */

.sw-page {
  position: relative;
  width: 100%;
  overflow-x: clip;
  background-color: var(--mui-palette-background-default);
  background-image: var(--ds-texture);
  background-size: 4px 4px;
}

/* faint horizontal pencil rules, like a big sheet of sketch paper */
.sw-page::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 119px,
    rgba(var(--mui-palette-common-onBackgroundChannel) / 0.045) 119px 120px
  );
  z-index: 0;
}

.sw-scene {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 72px);
  box-sizing: border-box;
}

/* ── Sprites & depth layers ───────────────────────────────────────────── */
.sw-sprite {
  width: 100%;
  user-select: none;
}

.sw-par {
  transform: translate3d(0, calc((0.5 - var(--p, 0.5)) * var(--depth, 0) * 1px), 0);
  will-change: transform;
}

.sw-amb {
  position: relative;
}

.sw-mouse {
  transform: translate3d(calc(var(--mx, 0) * var(--k, 0) * 1px), calc(var(--my, 0) * var(--k, 0) * 1px), 0);
  transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ── Reveal: soft rise ────────────────────────────────────────────────── */
.sw-fade {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sw-fade.is-in {
  opacity: 1;
  transform: none;
}

/* ── Reveal: pencil pass, then ink ────────────────────────────────────── */
.sw-drawn {
  position: relative;
}
.sw-drawn__pencil,
.sw-drawn__ink {
  -webkit-mask-image: linear-gradient(105deg, var(--mui-palette-text-primary) 42%, transparent 58%);
  mask-image: linear-gradient(105deg, var(--mui-palette-text-primary) 42%, transparent 58%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}
.sw-drawn__pencil {
  position: absolute;
  inset: 0;
  opacity: 0.8;
  filter: grayscale(1) contrast(1.5) brightness(1.06);
  transition: -webkit-mask-position 1.5s cubic-bezier(0.45, 0.05, 0.25, 1) var(--d, 0s),
    mask-position 1.5s cubic-bezier(0.45, 0.05, 0.25, 1) var(--d, 0s),
    opacity 1.4s ease calc(var(--d, 0s) + 2.6s);
}
.sw-drawn__ink {
  position: relative;
  transition: -webkit-mask-position 2.1s cubic-bezier(0.45, 0.05, 0.25, 1) calc(var(--d, 0s) + 0.75s),
    mask-position 2.1s cubic-bezier(0.45, 0.05, 0.25, 1) calc(var(--d, 0s) + 0.75s);
}
.sw-drawn.is-in .sw-drawn__pencil,
.sw-drawn.is-in .sw-drawn__ink {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}
.sw-drawn.is-in .sw-drawn__pencil {
  opacity: 0;
}

/* ── The world thread ─────────────────────────────────────────────────── */
.sw-world-thread {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.sw-world-thread__ink,
.sw-world-thread__ghost {
  fill: none;
  stroke: url(#sw-thread-ink);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sw-world-thread__ink {
  stroke-width: 3.6;
}
.sw-world-thread__ghost {
  stroke-width: 1.3;
  opacity: 0.45;
  transform: translate(2.5px, 1.5px);
}
.sw-world-thread__nib {
  fill: url(#sw-thread-ink);
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* ── Sky ──────────────────────────────────────────────────────────────── */
.sw-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.sw-cloud {
  position: absolute;
  left: 0;
}

/* ── Drawing overlays ─────────────────────────────────────────────────── */
.sw-scribble,
.sw-desk-sketch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.sw-scribble__stroke,
.sw-desk-sketch__stroke {
  fill: none;
  stroke: var(--ds-ink-soft);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
}
.sw-scribble__stroke {
  stroke-width: 2.6;
  stroke-dashoffset: 100;
}
.sw-desk-sketch__stroke {
  stroke-width: 2.4;
  stroke-dashoffset: calc(100 - 100 * clamp(0, (var(--p, 0) - var(--s, 0)) * 7, 1));
}
.sw-desk-sketch__stroke.is-color {
  stroke: var(--mui-palette-warning-main);
  stroke-width: 3;
}

.sw-steam {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}
.sw-steam__wisp {
  fill: none;
  stroke: var(--ds-ink-soft);
  stroke-width: 1.7;
  stroke-linecap: round;
}

.sw-river {
  position: relative;
}
.sw-river--flip {
  transform: scaleX(-1);
}
.sw-river__glint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease 2.4s;
  background-image: repeating-linear-gradient(90deg, transparent 0 46px, var(--ds-overlay) 50px, transparent 54px 110px),
    repeating-linear-gradient(90deg, transparent 0 20px, var(--ds-overlay) 22px, transparent 24px 70px);
  background-size: 110px 100%, 70px 100%;
}
.sw-river:has(.sw-drawn.is-in) .sw-river__glint {
  opacity: 0.5;
}

.sw-birds {
  position: absolute;
  left: 0;
  width: 80px;
  height: 40px;
  pointer-events: none;
  z-index: 0;
}
.sw-bird {
  position: absolute;
  overflow: visible;
}
.sw-bird path {
  fill: none;
  stroke: var(--ds-ink-soft);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Copy blocks sitting inside the drawing ───────────────────────────── */
.sw-note {
  position: relative;
  max-width: 34ch;
}
.sw-kicker {
  display: inline-block;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.sw-underline {
  position: absolute;
  left: 0;
  bottom: -0.18em;
  width: 100%;
  height: 0.28em;
  overflow: visible;
  pointer-events: none;
}
.sw-underline path {
  fill: none;
  stroke: var(--ds-accent);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
}
.is-in .sw-underline path {
  animation: sw-dash 1.3s 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


/* src/styles/motion.css */
/* ── Ambient life: slow, independent, never in sync ───────────────────── */

@keyframes sw-dash {
  to { stroke-dashoffset: 0; }
}

/* trees rock from the root, never from the middle */
@keyframes sw-sway {
  0%, 100% { transform: rotate(-0.9deg); }
  50% { transform: rotate(1.1deg); }
}
@keyframes sw-sway-soft {
  0%, 100% { transform: rotate(-0.35deg) skewX(0.3deg); }
  45% { transform: rotate(0.45deg) skewX(-0.4deg); }
}
/* balloon: up, drift, down — like breathing air */
@keyframes sw-bob {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
  30% { transform: translate3d(6px, -18px, 0) rotate(0.6deg); }
  65% { transform: translate3d(-4px, -8px, 0) rotate(1.2deg); }
}
/* paper pinned at one corner, lifted by air now and then */
@keyframes sw-breeze {
  0%, 100% { transform: rotate(0deg) skewY(0deg); }
  22% { transform: rotate(-1.4deg) skewY(0.6deg); }
  40% { transform: rotate(0.5deg) skewY(-0.3deg); }
  55% { transform: rotate(-0.4deg); }
}
/* the person at the desk: barely-there breathing */
@keyframes sw-breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.003, 1.008); }
}
/* floating doodles */
@keyframes sw-hover {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  33% { transform: translate3d(3px, -9px, 0) rotate(4deg); }
  70% { transform: translate3d(-4px, -3px, 0) rotate(-3deg); }
}
/* loose tools shifting a hair on the table */
@keyframes sw-rest {
  0%, 100% { transform: rotate(0deg) translate3d(0, 0, 0); }
  50% { transform: rotate(-0.6deg) translate3d(-2px, 1px, 0); }
}

@keyframes sw-drift {
  from { transform: translate3d(-42vw, 0, 0); }
  to { transform: translate3d(112vw, 0, 0); }
}
@keyframes sw-cloud-bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}

@keyframes sw-fly {
  0% { transform: translate3d(-14vw, 0, 0) scale(var(--bs, 1)); }
  22% { transform: translate3d(22vw, -22px, 0) scale(var(--bs, 1)); }
  44% { transform: translate3d(60vw, 4px, 0) scale(var(--bs, 1)); }
  66%, 100% { transform: translate3d(114vw, -14px, 0) scale(var(--bs, 1)); }
}
@keyframes sw-flap {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.3) translateY(2px); }
}

@keyframes sw-steam {
  0% { opacity: 0; transform: translateY(12px) scaleY(0.8); }
  35% { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-26px) scaleY(1.1); }
}

@keyframes sw-scribble {
  0% { stroke-dashoffset: 100; opacity: 0; }
  6% { opacity: 1; }
  42% { stroke-dashoffset: 0; opacity: 1; }
  78% { stroke-dashoffset: 0; opacity: 0.9; }
  94%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes sw-glint {
  to { background-position: 110px 0, 70px 0; }
}

.sw-a-sway { animation: sw-sway 8s ease-in-out infinite; transform-origin: 50% 100%; }
.sw-a-sway-soft { animation: sw-sway-soft 11s ease-in-out infinite; transform-origin: 50% 100%; }
.sw-a-bob { animation: sw-bob 13s ease-in-out infinite; }
.sw-a-breeze { animation: sw-breeze 9s ease-in-out infinite; transform-origin: 8% 6%; }
.sw-a-breathe { animation: sw-breathe 5.5s ease-in-out infinite; transform-origin: 40% 100%; }
.sw-a-hover { animation: sw-hover 10s ease-in-out infinite; }
.sw-a-rest { animation: sw-rest 12s ease-in-out infinite; transform-origin: 30% 60%; }

.sw-cloud__drift { animation: sw-drift linear infinite; }
.sw-cloud__bob { animation: sw-cloud-bob 15s ease-in-out infinite; }

.sw-birds { animation: sw-fly 58s linear infinite; }
.sw-birds--rev { animation-direction: reverse; }
.sw-bird { animation: sw-flap 1.2s ease-in-out infinite; transform-origin: 50% 75%; }

.sw-steam__wisp {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sw-steam 6.5s ease-in-out infinite;
}
.sw-steam__wisp:nth-child(2) { animation-delay: -2.2s; }
.sw-steam__wisp:nth-child(3) { animation-delay: -4.3s; }

.sw-scribble__stroke { animation: sw-scribble 7s ease-in-out infinite; }
.sw-scribble__stroke--late { animation-delay: 1.6s; }

.sw-river__glint { animation: sw-glint 8s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .sw-a-sway,
  .sw-a-sway-soft,
  .sw-a-bob,
  .sw-a-breeze,
  .sw-a-breathe,
  .sw-a-hover,
  .sw-a-rest,
  .sw-cloud__drift,
  .sw-cloud__bob,
  .sw-birds,
  .sw-bird,
  .sw-steam__wisp,
  .sw-scribble__stroke,
  .sw-river__glint {
    animation: none !important;
  }
  .sw-par,
  .sw-mouse {
    transform: none !important;
  }
  .sw-fade,
  .sw-drawn__ink {
    transition: none;
    opacity: 1;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .sw-drawn__pencil {
    display: none;
  }
}