/* Sketchbook — hand-drawn ink on warm paper (light) / chalk on slate (dark).
   The look is carried by 2px "pen" borders with asymmetric wobbly radii
   (varied per component so each element reads as individually drawn), a faint
   feTurbulence grain overlay, and watercolor washes derived from the user's
   accent via color-mix. No SVG displacement filters (perf). */

/* ---------------------------------------------------------------- */
/* 1. Scheme-independent tokens                                     */
/* ---------------------------------------------------------------- */

[data-theme="sketch"][data-theme] {
  --mantine-font-family: "Patrick Hand", "Segoe Print", "Comic Sans MS", cursive;
  --mantine-font-family-headings: "Caveat", "Patrick Hand", cursive;
  --mantine-heading-font-weight: 600;
  /* Caveat runs small for its em box — headings get larger sizes */
  --mantine-h1-font-size: 2.75rem;
  --mantine-h1-line-height: 1.15;
  --mantine-h2-font-size: 2.25rem;
  --mantine-h2-line-height: 1.18;
  --mantine-h3-font-size: 1.85rem;
  --mantine-h3-line-height: 1.2;
  --mantine-h4-font-size: 1.55rem;
  --mantine-h4-line-height: 1.25;
  --mantine-h5-font-size: 1.3rem;
  --mantine-h5-line-height: 1.3;
  --mantine-h6-font-size: 1.15rem;
  --mantine-h6-line-height: 1.35;

  --mantine-radius-xs: 6px;
  --mantine-radius-sm: 8px;
  --mantine-radius-md: 10px;
  --mantine-radius-lg: 14px;
  --mantine-radius-xl: 20px;
  --mantine-radius-default: 10px;

  --flxn-avatar-radius: 42%; /* hand-drawn "circle" */
  --flxn-avatar-border: 2px solid var(--sk-ink); /* single pen ring on the frame */
  --flxn-badge-radius: 14px;

  /* pencil-smudge shadows: soft, gray, slightly offset */
  --mantine-shadow-xs: 0 1px 2px var(--sk-smudge);
  --mantine-shadow-sm: 1px 2px 5px var(--sk-smudge);
  --mantine-shadow-md: 2px 3px 9px var(--sk-smudge);
  --mantine-shadow-lg: 3px 5px 14px var(--sk-smudge);
  --mantine-shadow-xl: 4px 7px 20px var(--sk-smudge);
}

/* ---------------------------------------------------------------- */
/* 2a. Light — ink on warm paper                                    */
/* ---------------------------------------------------------------- */

[data-theme="sketch"][data-theme][data-mantine-color-scheme="light"] {
  --sk-ink: #333333;
  --sk-ink-soft: rgba(51, 51, 51, 0.55);
  --sk-on-fill: #2f2c26;
  --sk-paper: #f9f4e8;
  --sk-paper-raised: #fffdf6;
  --sk-wash: color-mix(in srgb, var(--mantine-primary-color-6) 18%, #fffdf6);
  --sk-accent-ink: color-mix(in srgb, var(--mantine-primary-color-6) 65%, #333333);
  --sk-smudge: rgba(88, 80, 62, 0.2);
  --sk-hatch: rgba(51, 51, 51, 0.22);
  --sk-skeleton: #ebe3d0;
  --sk-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='5' viewBox='0 0 22 5'%3E%3Cpath d='M0 3 Q 5.5 0.8 11 3 T 22 3' fill='none' stroke='%23333333' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");

  --mantine-color-body: #f9f4e8;
  --mantine-color-text: #333333;
  --mantine-color-bright: #1f1d18;
  --mantine-color-dimmed: #6b655a;
  --mantine-color-placeholder: #8a8375;
  --mantine-color-anchor: var(--sk-accent-ink);
  --mantine-color-error: #a44e46;
  --mantine-color-default: #fffdf6;
  --mantine-color-default-hover: #f1ead9;
  --mantine-color-default-color: #333333;
  --mantine-color-default-border: #333333;
  --mantine-primary-color-contrast: #2f2c26;

  /* app tokens */
  --flxn-gold: #dca815; /* crayon yellow */
  --flxn-silver: #8f8a80; /* pencil gray */
  --flxn-bronze: #b0744a; /* crayon sienna */
  --flxn-toast-success: #5f8f5f;
  --flxn-toast-error: #c26e63;
  --flxn-podium-1-bg: #f8eecb;
  --flxn-podium-1-border: #8c7a35;
  --flxn-podium-1-label: #7c6614;
  --flxn-podium-2-bg: #f0ede4;
  --flxn-podium-2-border: #77746c;
  --flxn-podium-2-label: #5f5c54;
  --flxn-podium-3-bg: #f4e5d3;
  --flxn-podium-3-border: #8f6a45;
  --flxn-podium-3-label: #82552e;
  --flxn-showcase-bg: #fffdf6;
  --flxn-overlay: rgba(56, 50, 38, 0.45);
  --flxn-dotgrid-color: rgba(51, 51, 51, 0.3); /* pencil dots */
  --flxn-pop-shadow: rgba(88, 80, 62, 0.3);
}

/* ---------------------------------------------------------------- */
/* 2b. Dark — chalk on slate                                        */
/* ---------------------------------------------------------------- */

[data-theme="sketch"][data-theme][data-mantine-color-scheme="dark"] {
  --sk-ink: #dfdcd0; /* chalk */
  --sk-ink-soft: rgba(223, 220, 208, 0.5);
  --sk-on-fill: #232a26;
  --sk-paper: #232a26;
  --sk-paper-raised: #2a322d;
  --sk-wash: color-mix(in srgb, var(--mantine-primary-color-4) 22%, #2a322d);
  --sk-accent-ink: color-mix(in srgb, var(--mantine-primary-color-3) 70%, #dfdcd0);
  --sk-smudge: rgba(0, 0, 0, 0.45);
  --sk-hatch: rgba(35, 42, 38, 0.4);
  --sk-skeleton: #38423b;
  --sk-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='5' viewBox='0 0 22 5'%3E%3Cpath d='M0 3 Q 5.5 0.8 11 3 T 22 3' fill='none' stroke='%23dfdcd0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");

  --mantine-color-body: #232a26;
  --mantine-color-text: #e8e5da;
  --mantine-color-bright: #f6f4ec;
  --mantine-color-dimmed: #a3ac9f;
  --mantine-color-placeholder: #8b948a;
  --mantine-color-anchor: var(--sk-accent-ink);
  --mantine-color-error: #e8a198;
  --mantine-color-default: #2a322d;
  --mantine-color-default-hover: #333c36;
  --mantine-color-default-color: #e8e5da;
  --mantine-color-default-border: #d7d4c6;
  --mantine-primary-color-contrast: #232a26;

  /* app tokens — dusty chalk pastels */
  --flxn-gold: #ecd27a;
  --flxn-silver: #b9beb3;
  --flxn-bronze: #d9a06b;
  --flxn-toast-success: #b3d7ae;
  --flxn-toast-error: #eaa79b;
  --flxn-podium-1-bg: color-mix(in srgb, #ecd27a 12%, #2a322d);
  --flxn-podium-1-border: #cdb96b;
  --flxn-podium-1-label: #e9d78f;
  --flxn-podium-2-bg: color-mix(in srgb, #b9beb3 10%, #2a322d);
  --flxn-podium-2-border: #a4a99e;
  --flxn-podium-2-label: #c9cec2;
  --flxn-podium-3-bg: color-mix(in srgb, #d9a06b 12%, #2a322d);
  --flxn-podium-3-border: #c08f5c;
  --flxn-podium-3-label: #e0b384;
  --flxn-showcase-bg: #2a322d;
  --flxn-overlay: rgba(6, 9, 8, 0.6);
  --flxn-dotgrid-color: rgba(223, 220, 208, 0.22); /* chalk dots */
  --flxn-pop-shadow: rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------------- */
/* 3. Paper grain / chalk dust — one fixed overlay, feTurbulence    */
/* ---------------------------------------------------------------- */

[data-theme="sketch"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: 0.05;
}

[data-theme="sketch"][data-mantine-color-scheme="dark"] body::before {
  mix-blend-mode: screen;
  opacity: 0.07;
}

/* ---------------------------------------------------------------- */
/* 4. Surfaces — every card its own doodle                          */
/* ---------------------------------------------------------------- */

[data-theme="sketch"] .mantine-Paper-root {
  background-color: var(--sk-paper-raised);
  border: 2px solid var(--sk-ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: none;
}

[data-theme="sketch"] .mantine-Card-root {
  border-radius: 15px 225px 15px 255px / 225px 15px 255px 15px;
}

[data-theme="sketch"] .mantine-Modal-content {
  border-radius: 18px 225px 22px 255px / 255px 22px 225px 18px;
  box-shadow: var(--mantine-shadow-xl);
}

[data-theme="sketch"] .mantine-Modal-header {
  background-color: var(--sk-paper-raised);
}

[data-theme="sketch"] .mantine-Drawer-content {
  border-radius: 20px 235px 16px 245px / 245px 16px 235px 20px;
  box-shadow: var(--mantine-shadow-xl);
}

[data-theme="sketch"] .mantine-Popover-dropdown,
[data-theme="sketch"] .mantine-Menu-dropdown {
  background-color: var(--sk-paper-raised);
  border: 2px solid var(--sk-ink);
  border-radius: 255px 25px 225px 22px / 22px 225px 25px 255px;
  box-shadow: var(--mantine-shadow-md);
}

[data-theme="sketch"] .mantine-Menu-item {
  border-radius: 215px 14px 195px 16px / 16px 195px 14px 215px;
}

[data-theme="sketch"] .mantine-Notification-root {
  background-color: var(--sk-paper-raised);
  border: 2px solid var(--sk-ink);
  border-radius: 15px 245px 18px 235px / 235px 18px 245px 15px;
  box-shadow: var(--mantine-shadow-md);
}

[data-theme="sketch"] .mantine-Alert-root {
  border: 2px solid var(--sk-ink-soft);
  border-radius: 20px 240px 16px 250px / 250px 16px 240px 20px;
}

[data-theme="sketch"] .mantine-Tooltip-tooltip {
  background-color: var(--sk-ink);
  color: var(--sk-paper);
  border-radius: 205px 12px 225px 14px / 14px 225px 12px 205px;
}

/* ---------------------------------------------------------------- */
/* 5. Shell                                                         */
/* ---------------------------------------------------------------- */

[data-theme="sketch"] .mantine-AppShell-header {
  border-bottom: 2px solid var(--sk-ink);
}

[data-theme="sketch"] .mantine-AppShell-navbar {
  border-inline-end: 2px solid var(--sk-ink);
}

[data-theme="sketch"] .mantine-AppShell-aside {
  border-inline-start: 2px solid var(--sk-ink);
}

[data-theme="sketch"] .mantine-Divider-root {
  --divider-color: var(--sk-ink-soft);
  --divider-size: 2px;
}

[data-theme="sketch"] .mantine-Divider-root[data-orientation="horizontal"] {
  border-top-style: dashed;
}

[data-theme="sketch"] .mantine-Divider-root[data-orientation="vertical"] {
  border-inline-start-style: dashed;
}

/* ---------------------------------------------------------------- */
/* 6. Buttons — sketched boxes                                      */
/* ---------------------------------------------------------------- */

[data-theme="sketch"] .mantine-Button-root {
  border-radius: 225px 20px 255px 15px / 15px 255px 20px 225px;
  box-shadow: none;
  font-weight: 400; /* Patrick Hand ships 400 only; avoid faux bold */
}

[data-theme="sketch"] .mantine-Button-root:where([data-variant="filled"], [data-variant="default"], [data-variant="outline"], [data-variant="light"], [data-variant="white"]) {
  border: 2px solid var(--sk-ink);
}

[data-theme="sketch"] .mantine-ActionIcon-root {
  border-radius: 160px 25px 185px 28px / 28px 185px 25px 160px;
  box-shadow: none;
}

[data-theme="sketch"] .mantine-ActionIcon-root:where([data-variant="filled"], [data-variant="default"], [data-variant="outline"], [data-variant="light"], [data-variant="white"]) {
  border: 2px solid var(--sk-ink);
}

[data-theme="sketch"] .mantine-Button-root[data-variant="filled"],
[data-theme="sketch"] .mantine-ActionIcon-root[data-variant="filled"],
[data-theme="sketch"] .mantine-Badge-root[data-variant="filled"],
[data-theme="sketch"] .mantine-ThemeIcon-root[data-variant="filled"] {
  color: var(--sk-on-fill); /* ink on watercolor wash, chalkboard on pastel */
}

/* press feedback: a slight crooked stamp */
@media (prefers-reduced-motion: no-preference) {
  [data-theme="sketch"] .flxn-press:active:not(:disabled):not([data-disabled]):not([data-loading]) {
    transform: scale(0.96) rotate(-0.7deg);
  }
}

/* ---------------------------------------------------------------- */
/* 7. Inputs                                                        */
/* ---------------------------------------------------------------- */

[data-theme="sketch"] .mantine-Input-input {
  background-color: var(--sk-paper-raised);
  border: 2px solid var(--sk-ink);
  border-radius: 12px 255px 18px 225px / 225px 18px 255px 12px;
}

[data-theme="sketch"] .mantine-Input-input:focus,
[data-theme="sketch"] .mantine-Input-input:focus-within {
  border-color: var(--sk-accent-ink);
}

[data-theme="sketch"] .mantine-InputWrapper-label {
  font-family: var(--mantine-font-family-headings);
  font-size: 1.15rem;
}

[data-theme="sketch"] .mantine-PinInput-input {
  border-radius: 190px 16px 210px 14px / 14px 210px 16px 190px;
}

[data-theme="sketch"] .mantine-Checkbox-input {
  background-color: var(--sk-paper-raised);
  border: 2px solid var(--sk-ink);
  border-radius: 155px 8px 145px 10px / 10px 145px 8px 155px;
}

[data-theme="sketch"] .mantine-Checkbox-icon {
  color: var(--sk-on-fill);
}

[data-theme="sketch"] .mantine-Radio-radio {
  background-color: var(--sk-paper-raised);
  border: 2px solid var(--sk-ink);
  border-radius: 48% 52% 51% 49% / 52% 48% 52% 48%;
}

[data-theme="sketch"] .mantine-Radio-icon {
  color: var(--sk-on-fill);
}

[data-theme="sketch"] .mantine-Switch-track {
  background-color: var(--sk-paper-raised);
  border: 2px solid var(--sk-ink);
  border-radius: 120px 40px 110px 45px / 45px 110px 40px 120px;
}

[data-theme="sketch"] .mantine-Switch-thumb {
  background-color: var(--sk-paper-raised);
  border: 2px solid var(--sk-ink);
  border-radius: 50% 46% 54% 48% / 48% 54% 46% 52%;
}

/* ---------------------------------------------------------------- */
/* 8. Tabs — scribbled underline on the active tab                  */
/* ---------------------------------------------------------------- */

[data-theme="sketch"] .mantine-Tabs-tab {
  border-radius: 200px 12px 190px 14px / 14px 190px 12px 200px;
  font-weight: 400;
}

[data-theme="sketch"] .mantine-Tabs-tab[data-active] {
  border-color: transparent;
  background-image: var(--sk-squiggle);
  background-repeat: repeat-x;
  background-position: left bottom 1px;
  background-size: 22px 5px;
  color: var(--mantine-color-text);
}

[data-theme="sketch"] .mantine-SegmentedControl-root {
  background-color: transparent;
  border: 2px solid var(--sk-ink);
  border-radius: 225px 18px 255px 15px / 15px 255px 18px 225px;
}

[data-theme="sketch"] .mantine-SegmentedControl-indicator {
  background-color: var(--sk-wash);
  border: 2px solid var(--sk-ink-soft);
  border-radius: 205px 15px 235px 12px / 12px 235px 15px 205px;
  box-shadow: none;
}

[data-theme="sketch"] .mantine-NavLink-root {
  border: 2px solid transparent;
  border-radius: 235px 18px 215px 20px / 20px 215px 18px 235px;
}

[data-theme="sketch"] .mantine-NavLink-root[data-active] {
  border-color: var(--sk-ink-soft);
}

/* ---------------------------------------------------------------- */
/* 9. Small pieces                                                  */
/* ---------------------------------------------------------------- */

[data-theme="sketch"] .mantine-Badge-root {
  border: 2px solid var(--sk-ink);
  border-radius: 255px 10px 225px 12px / 12px 225px 10px 255px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

[data-theme="sketch"] .mantine-ThemeIcon-root {
  border: 2px solid var(--sk-ink);
  border-radius: 170px 30px 150px 35px / 35px 150px 30px 170px;
}

[data-theme="sketch"] .mantine-Indicator-indicator {
  border: 1.5px solid var(--sk-ink);
  border-radius: 50% 45% 55% 48% / 52% 50% 46% 54%;
}

[data-theme="sketch"] .mantine-Skeleton-root {
  border-radius: 225px 20px 245px 18px / 18px 245px 20px 225px;
}

[data-theme="sketch"] .mantine-Skeleton-root::after {
  background-color: var(--sk-skeleton);
}

[data-theme="sketch"] .mantine-Loader-root {
  --loader-color: var(--sk-accent-ink);
}

/* progress bar: wobbly pill with pencil cross-hatch fill */
[data-theme="sketch"] .mantine-Progress-root {
  background-color: var(--sk-paper-raised);
  border: 2px solid var(--sk-ink);
  border-radius: 100px 30px 90px 35px / 35px 90px 30px 100px;
}

[data-theme="sketch"] .mantine-Progress-section {
  background-image: repeating-linear-gradient(45deg, transparent 0 4px, var(--sk-hatch) 4px 6px);
}

[data-theme="sketch"] .mantine-Progress-label {
  color: var(--sk-on-fill);
}

/* ---------------------------------------------------------------- */
/* 9b. App component hooks                                          */
/* ---------------------------------------------------------------- */

/* Tab strip: flat on the page when resting; the raised paper strip with
   its pencil rule appears only while docked. Resting keeps the 2px dashed
   border transparent so docking doesn't shift layout. */
[data-theme="sketch"] .flxn-tabs {
  border-bottom: 2px dashed transparent;
}

[data-theme="sketch"] .flxn-tabs[data-stuck] {
  background-color: var(--sk-paper-raised);
  border-bottom-color: var(--sk-ink-soft);
}

[data-theme="sketch"] .flxn-tab.flxn-tab {
  position: relative;
  border-radius: 200px 12px 190px 14px / 14px 190px 12px 200px;
}

/* active tab: accent watercolor wash + accent scribble underline */
[data-theme="sketch"] .flxn-tab.flxn-tab[data-active] {
  background-color: var(--sk-wash);
  color: var(--sk-accent-ink);
  font-weight: 400; /* Patrick Hand has no bold */
}

[data-theme="sketch"] .flxn-tab.flxn-tab[data-active]::after {
  content: "";
  position: absolute;
  inset-inline: 0.6rem;
  bottom: 2px;
  height: 5px;
  background-color: var(--sk-accent-ink);
  -webkit-mask-image: var(--sk-squiggle);
  mask-image: var(--sk-squiggle);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 22px 5px;
  mask-size: 22px 5px;
}

/* the tab treatment carries the state — drop the straight underline */
[data-theme="sketch"] .flxn-tabs-indicator.flxn-tabs-indicator {
  border-bottom: none;
}

/* Nav grid tiles: sketched boxes, each drawn slightly differently */
[data-theme="sketch"] .flxn-tile {
  background-color: var(--sk-paper-raised);
  border: 2px solid var(--sk-ink);
  border-radius: 255px 15px 225px 18px / 18px 225px 15px 255px;
  box-shadow: none;
}

[data-theme="sketch"] .flxn-tile:nth-child(even) {
  border-radius: 15px 235px 18px 245px / 235px 15px 245px 18px;
}

[data-theme="sketch"] .flxn-tile:nth-child(3n) {
  border-radius: 225px 22px 245px 15px / 15px 245px 22px 225px;
}

[data-theme="sketch"] .flxn-tile-icon {
  color: var(--sk-accent-ink);
}

/* "See all" chip: hand-drawn pill; wash bg/hover come from the retuned
   primary variant vars in hooks.css */
[data-theme="sketch"] .flxn-see-all.flxn-see-all {
  border: 2px solid var(--sk-ink);
  border-radius: 255px 12px 225px 14px / 14px 225px 12px 255px;
  font-weight: 400;
}

/* Match card + reaction tray: one construction, matching 2px pen border */
[data-theme="sketch"] .flxn-match-card.flxn-match-card {
  background-color: var(--sk-paper-raised);
  border: 2px solid var(--sk-ink);
  border-radius: 18px 235px 16px 245px / 235px 18px 245px 16px;
  box-shadow: none;
}

[data-theme="sketch"] .flxn-reaction-row.flxn-reaction-row {
  background-color: var(--sk-paper);
  border: 2px solid var(--sk-ink);
  border-radius: 15px 225px 18px 235px / 225px 15px 235px 18px;
}

/* ---------------------------------------------------------------- */
/* 10. Watercolor washes (light) / dusty chalk pastels (dark)       */
/* Every palette color's variant vars are re-derived from its own   */
/* numbered shades, so the user's accent (and any colored variant)  */
/* shows through as a low-saturation wash instead of a solid fill.  */
/* ---------------------------------------------------------------- */

[data-theme="sketch"][data-theme][data-mantine-color-scheme="light"] {
  --mantine-color-red-filled: color-mix(in srgb, var(--mantine-color-red-6) 45%, #fffdf6);
  --mantine-color-red-filled-hover: color-mix(in srgb, var(--mantine-color-red-6) 58%, #fffdf6);
  --mantine-color-red-light: color-mix(in srgb, var(--mantine-color-red-6) 15%, #fffdf6);
  --mantine-color-red-light-hover: color-mix(in srgb, var(--mantine-color-red-6) 23%, #fffdf6);
  --mantine-color-red-light-color: color-mix(in srgb, var(--mantine-color-red-9) 72%, #333333);
  --mantine-color-red-outline: color-mix(in srgb, var(--mantine-color-red-7) 65%, #333333);
  --mantine-color-red-outline-hover: color-mix(in srgb, var(--mantine-color-red-6) 15%, #fffdf6);
  --mantine-color-red-text: color-mix(in srgb, var(--mantine-color-red-8) 75%, #333333);
  --mantine-color-pink-filled: color-mix(in srgb, var(--mantine-color-pink-6) 45%, #fffdf6);
  --mantine-color-pink-filled-hover: color-mix(in srgb, var(--mantine-color-pink-6) 58%, #fffdf6);
  --mantine-color-pink-light: color-mix(in srgb, var(--mantine-color-pink-6) 15%, #fffdf6);
  --mantine-color-pink-light-hover: color-mix(in srgb, var(--mantine-color-pink-6) 23%, #fffdf6);
  --mantine-color-pink-light-color: color-mix(in srgb, var(--mantine-color-pink-9) 72%, #333333);
  --mantine-color-pink-outline: color-mix(in srgb, var(--mantine-color-pink-7) 65%, #333333);
  --mantine-color-pink-outline-hover: color-mix(in srgb, var(--mantine-color-pink-6) 15%, #fffdf6);
  --mantine-color-pink-text: color-mix(in srgb, var(--mantine-color-pink-8) 75%, #333333);
  --mantine-color-grape-filled: color-mix(in srgb, var(--mantine-color-grape-6) 45%, #fffdf6);
  --mantine-color-grape-filled-hover: color-mix(in srgb, var(--mantine-color-grape-6) 58%, #fffdf6);
  --mantine-color-grape-light: color-mix(in srgb, var(--mantine-color-grape-6) 15%, #fffdf6);
  --mantine-color-grape-light-hover: color-mix(in srgb, var(--mantine-color-grape-6) 23%, #fffdf6);
  --mantine-color-grape-light-color: color-mix(in srgb, var(--mantine-color-grape-9) 72%, #333333);
  --mantine-color-grape-outline: color-mix(in srgb, var(--mantine-color-grape-7) 65%, #333333);
  --mantine-color-grape-outline-hover: color-mix(in srgb, var(--mantine-color-grape-6) 15%, #fffdf6);
  --mantine-color-grape-text: color-mix(in srgb, var(--mantine-color-grape-8) 75%, #333333);
  --mantine-color-violet-filled: color-mix(in srgb, var(--mantine-color-violet-6) 45%, #fffdf6);
  --mantine-color-violet-filled-hover: color-mix(in srgb, var(--mantine-color-violet-6) 58%, #fffdf6);
  --mantine-color-violet-light: color-mix(in srgb, var(--mantine-color-violet-6) 15%, #fffdf6);
  --mantine-color-violet-light-hover: color-mix(in srgb, var(--mantine-color-violet-6) 23%, #fffdf6);
  --mantine-color-violet-light-color: color-mix(in srgb, var(--mantine-color-violet-9) 72%, #333333);
  --mantine-color-violet-outline: color-mix(in srgb, var(--mantine-color-violet-7) 65%, #333333);
  --mantine-color-violet-outline-hover: color-mix(in srgb, var(--mantine-color-violet-6) 15%, #fffdf6);
  --mantine-color-violet-text: color-mix(in srgb, var(--mantine-color-violet-8) 75%, #333333);
  --mantine-color-indigo-filled: color-mix(in srgb, var(--mantine-color-indigo-6) 45%, #fffdf6);
  --mantine-color-indigo-filled-hover: color-mix(in srgb, var(--mantine-color-indigo-6) 58%, #fffdf6);
  --mantine-color-indigo-light: color-mix(in srgb, var(--mantine-color-indigo-6) 15%, #fffdf6);
  --mantine-color-indigo-light-hover: color-mix(in srgb, var(--mantine-color-indigo-6) 23%, #fffdf6);
  --mantine-color-indigo-light-color: color-mix(in srgb, var(--mantine-color-indigo-9) 72%, #333333);
  --mantine-color-indigo-outline: color-mix(in srgb, var(--mantine-color-indigo-7) 65%, #333333);
  --mantine-color-indigo-outline-hover: color-mix(in srgb, var(--mantine-color-indigo-6) 15%, #fffdf6);
  --mantine-color-indigo-text: color-mix(in srgb, var(--mantine-color-indigo-8) 75%, #333333);
  --mantine-color-blue-filled: color-mix(in srgb, var(--mantine-color-blue-6) 45%, #fffdf6);
  --mantine-color-blue-filled-hover: color-mix(in srgb, var(--mantine-color-blue-6) 58%, #fffdf6);
  --mantine-color-blue-light: color-mix(in srgb, var(--mantine-color-blue-6) 15%, #fffdf6);
  --mantine-color-blue-light-hover: color-mix(in srgb, var(--mantine-color-blue-6) 23%, #fffdf6);
  --mantine-color-blue-light-color: color-mix(in srgb, var(--mantine-color-blue-9) 72%, #333333);
  --mantine-color-blue-outline: color-mix(in srgb, var(--mantine-color-blue-7) 65%, #333333);
  --mantine-color-blue-outline-hover: color-mix(in srgb, var(--mantine-color-blue-6) 15%, #fffdf6);
  --mantine-color-blue-text: color-mix(in srgb, var(--mantine-color-blue-8) 75%, #333333);
  --mantine-color-cyan-filled: color-mix(in srgb, var(--mantine-color-cyan-6) 45%, #fffdf6);
  --mantine-color-cyan-filled-hover: color-mix(in srgb, var(--mantine-color-cyan-6) 58%, #fffdf6);
  --mantine-color-cyan-light: color-mix(in srgb, var(--mantine-color-cyan-6) 15%, #fffdf6);
  --mantine-color-cyan-light-hover: color-mix(in srgb, var(--mantine-color-cyan-6) 23%, #fffdf6);
  --mantine-color-cyan-light-color: color-mix(in srgb, var(--mantine-color-cyan-9) 72%, #333333);
  --mantine-color-cyan-outline: color-mix(in srgb, var(--mantine-color-cyan-7) 65%, #333333);
  --mantine-color-cyan-outline-hover: color-mix(in srgb, var(--mantine-color-cyan-6) 15%, #fffdf6);
  --mantine-color-cyan-text: color-mix(in srgb, var(--mantine-color-cyan-8) 75%, #333333);
  --mantine-color-teal-filled: color-mix(in srgb, var(--mantine-color-teal-6) 45%, #fffdf6);
  --mantine-color-teal-filled-hover: color-mix(in srgb, var(--mantine-color-teal-6) 58%, #fffdf6);
  --mantine-color-teal-light: color-mix(in srgb, var(--mantine-color-teal-6) 15%, #fffdf6);
  --mantine-color-teal-light-hover: color-mix(in srgb, var(--mantine-color-teal-6) 23%, #fffdf6);
  --mantine-color-teal-light-color: color-mix(in srgb, var(--mantine-color-teal-9) 72%, #333333);
  --mantine-color-teal-outline: color-mix(in srgb, var(--mantine-color-teal-7) 65%, #333333);
  --mantine-color-teal-outline-hover: color-mix(in srgb, var(--mantine-color-teal-6) 15%, #fffdf6);
  --mantine-color-teal-text: color-mix(in srgb, var(--mantine-color-teal-8) 75%, #333333);
  --mantine-color-green-filled: color-mix(in srgb, var(--mantine-color-green-6) 45%, #fffdf6);
  --mantine-color-green-filled-hover: color-mix(in srgb, var(--mantine-color-green-6) 58%, #fffdf6);
  --mantine-color-green-light: color-mix(in srgb, var(--mantine-color-green-6) 15%, #fffdf6);
  --mantine-color-green-light-hover: color-mix(in srgb, var(--mantine-color-green-6) 23%, #fffdf6);
  --mantine-color-green-light-color: color-mix(in srgb, var(--mantine-color-green-9) 72%, #333333);
  --mantine-color-green-outline: color-mix(in srgb, var(--mantine-color-green-7) 65%, #333333);
  --mantine-color-green-outline-hover: color-mix(in srgb, var(--mantine-color-green-6) 15%, #fffdf6);
  --mantine-color-green-text: color-mix(in srgb, var(--mantine-color-green-8) 75%, #333333);
  --mantine-color-lime-filled: color-mix(in srgb, var(--mantine-color-lime-6) 45%, #fffdf6);
  --mantine-color-lime-filled-hover: color-mix(in srgb, var(--mantine-color-lime-6) 58%, #fffdf6);
  --mantine-color-lime-light: color-mix(in srgb, var(--mantine-color-lime-6) 15%, #fffdf6);
  --mantine-color-lime-light-hover: color-mix(in srgb, var(--mantine-color-lime-6) 23%, #fffdf6);
  --mantine-color-lime-light-color: color-mix(in srgb, var(--mantine-color-lime-9) 72%, #333333);
  --mantine-color-lime-outline: color-mix(in srgb, var(--mantine-color-lime-7) 65%, #333333);
  --mantine-color-lime-outline-hover: color-mix(in srgb, var(--mantine-color-lime-6) 15%, #fffdf6);
  --mantine-color-lime-text: color-mix(in srgb, var(--mantine-color-lime-8) 75%, #333333);
  --mantine-color-yellow-filled: color-mix(in srgb, var(--mantine-color-yellow-6) 45%, #fffdf6);
  --mantine-color-yellow-filled-hover: color-mix(in srgb, var(--mantine-color-yellow-6) 58%, #fffdf6);
  --mantine-color-yellow-light: color-mix(in srgb, var(--mantine-color-yellow-6) 15%, #fffdf6);
  --mantine-color-yellow-light-hover: color-mix(in srgb, var(--mantine-color-yellow-6) 23%, #fffdf6);
  --mantine-color-yellow-light-color: color-mix(in srgb, var(--mantine-color-yellow-9) 72%, #333333);
  --mantine-color-yellow-outline: color-mix(in srgb, var(--mantine-color-yellow-7) 65%, #333333);
  --mantine-color-yellow-outline-hover: color-mix(in srgb, var(--mantine-color-yellow-6) 15%, #fffdf6);
  --mantine-color-yellow-text: color-mix(in srgb, var(--mantine-color-yellow-8) 75%, #333333);
  --mantine-color-orange-filled: color-mix(in srgb, var(--mantine-color-orange-6) 45%, #fffdf6);
  --mantine-color-orange-filled-hover: color-mix(in srgb, var(--mantine-color-orange-6) 58%, #fffdf6);
  --mantine-color-orange-light: color-mix(in srgb, var(--mantine-color-orange-6) 15%, #fffdf6);
  --mantine-color-orange-light-hover: color-mix(in srgb, var(--mantine-color-orange-6) 23%, #fffdf6);
  --mantine-color-orange-light-color: color-mix(in srgb, var(--mantine-color-orange-9) 72%, #333333);
  --mantine-color-orange-outline: color-mix(in srgb, var(--mantine-color-orange-7) 65%, #333333);
  --mantine-color-orange-outline-hover: color-mix(in srgb, var(--mantine-color-orange-6) 15%, #fffdf6);
  --mantine-color-orange-text: color-mix(in srgb, var(--mantine-color-orange-8) 75%, #333333);
  --mantine-color-gray-filled: color-mix(in srgb, var(--mantine-color-gray-6) 45%, #fffdf6);
  --mantine-color-gray-filled-hover: color-mix(in srgb, var(--mantine-color-gray-6) 58%, #fffdf6);
  --mantine-color-gray-light: color-mix(in srgb, var(--mantine-color-gray-6) 15%, #fffdf6);
  --mantine-color-gray-light-hover: color-mix(in srgb, var(--mantine-color-gray-6) 23%, #fffdf6);
  --mantine-color-gray-light-color: color-mix(in srgb, var(--mantine-color-gray-9) 72%, #333333);
  --mantine-color-gray-outline: color-mix(in srgb, var(--mantine-color-gray-7) 65%, #333333);
  --mantine-color-gray-outline-hover: color-mix(in srgb, var(--mantine-color-gray-6) 15%, #fffdf6);
  --mantine-color-gray-text: color-mix(in srgb, var(--mantine-color-gray-8) 75%, #333333);
}

[data-theme="sketch"][data-theme][data-mantine-color-scheme="dark"] {
  --mantine-color-red-filled: color-mix(in srgb, var(--mantine-color-red-3) 62%, #d9d5c7);
  --mantine-color-red-filled-hover: color-mix(in srgb, var(--mantine-color-red-3) 76%, #d9d5c7);
  --mantine-color-red-light: color-mix(in srgb, var(--mantine-color-red-4) 20%, #2a322d);
  --mantine-color-red-light-hover: color-mix(in srgb, var(--mantine-color-red-4) 30%, #2a322d);
  --mantine-color-red-light-color: color-mix(in srgb, var(--mantine-color-red-2) 78%, #e8e5da);
  --mantine-color-red-outline: color-mix(in srgb, var(--mantine-color-red-2) 80%, #dfdcd0);
  --mantine-color-red-outline-hover: color-mix(in srgb, var(--mantine-color-red-4) 22%, #2a322d);
  --mantine-color-red-text: color-mix(in srgb, var(--mantine-color-red-2) 80%, #e8e5da);
  --mantine-color-pink-filled: color-mix(in srgb, var(--mantine-color-pink-3) 62%, #d9d5c7);
  --mantine-color-pink-filled-hover: color-mix(in srgb, var(--mantine-color-pink-3) 76%, #d9d5c7);
  --mantine-color-pink-light: color-mix(in srgb, var(--mantine-color-pink-4) 20%, #2a322d);
  --mantine-color-pink-light-hover: color-mix(in srgb, var(--mantine-color-pink-4) 30%, #2a322d);
  --mantine-color-pink-light-color: color-mix(in srgb, var(--mantine-color-pink-2) 78%, #e8e5da);
  --mantine-color-pink-outline: color-mix(in srgb, var(--mantine-color-pink-2) 80%, #dfdcd0);
  --mantine-color-pink-outline-hover: color-mix(in srgb, var(--mantine-color-pink-4) 22%, #2a322d);
  --mantine-color-pink-text: color-mix(in srgb, var(--mantine-color-pink-2) 80%, #e8e5da);
  --mantine-color-grape-filled: color-mix(in srgb, var(--mantine-color-grape-3) 62%, #d9d5c7);
  --mantine-color-grape-filled-hover: color-mix(in srgb, var(--mantine-color-grape-3) 76%, #d9d5c7);
  --mantine-color-grape-light: color-mix(in srgb, var(--mantine-color-grape-4) 20%, #2a322d);
  --mantine-color-grape-light-hover: color-mix(in srgb, var(--mantine-color-grape-4) 30%, #2a322d);
  --mantine-color-grape-light-color: color-mix(in srgb, var(--mantine-color-grape-2) 78%, #e8e5da);
  --mantine-color-grape-outline: color-mix(in srgb, var(--mantine-color-grape-2) 80%, #dfdcd0);
  --mantine-color-grape-outline-hover: color-mix(in srgb, var(--mantine-color-grape-4) 22%, #2a322d);
  --mantine-color-grape-text: color-mix(in srgb, var(--mantine-color-grape-2) 80%, #e8e5da);
  --mantine-color-violet-filled: color-mix(in srgb, var(--mantine-color-violet-3) 62%, #d9d5c7);
  --mantine-color-violet-filled-hover: color-mix(in srgb, var(--mantine-color-violet-3) 76%, #d9d5c7);
  --mantine-color-violet-light: color-mix(in srgb, var(--mantine-color-violet-4) 20%, #2a322d);
  --mantine-color-violet-light-hover: color-mix(in srgb, var(--mantine-color-violet-4) 30%, #2a322d);
  --mantine-color-violet-light-color: color-mix(in srgb, var(--mantine-color-violet-2) 78%, #e8e5da);
  --mantine-color-violet-outline: color-mix(in srgb, var(--mantine-color-violet-2) 80%, #dfdcd0);
  --mantine-color-violet-outline-hover: color-mix(in srgb, var(--mantine-color-violet-4) 22%, #2a322d);
  --mantine-color-violet-text: color-mix(in srgb, var(--mantine-color-violet-2) 80%, #e8e5da);
  --mantine-color-indigo-filled: color-mix(in srgb, var(--mantine-color-indigo-3) 62%, #d9d5c7);
  --mantine-color-indigo-filled-hover: color-mix(in srgb, var(--mantine-color-indigo-3) 76%, #d9d5c7);
  --mantine-color-indigo-light: color-mix(in srgb, var(--mantine-color-indigo-4) 20%, #2a322d);
  --mantine-color-indigo-light-hover: color-mix(in srgb, var(--mantine-color-indigo-4) 30%, #2a322d);
  --mantine-color-indigo-light-color: color-mix(in srgb, var(--mantine-color-indigo-2) 78%, #e8e5da);
  --mantine-color-indigo-outline: color-mix(in srgb, var(--mantine-color-indigo-2) 80%, #dfdcd0);
  --mantine-color-indigo-outline-hover: color-mix(in srgb, var(--mantine-color-indigo-4) 22%, #2a322d);
  --mantine-color-indigo-text: color-mix(in srgb, var(--mantine-color-indigo-2) 80%, #e8e5da);
  --mantine-color-blue-filled: color-mix(in srgb, var(--mantine-color-blue-3) 62%, #d9d5c7);
  --mantine-color-blue-filled-hover: color-mix(in srgb, var(--mantine-color-blue-3) 76%, #d9d5c7);
  --mantine-color-blue-light: color-mix(in srgb, var(--mantine-color-blue-4) 20%, #2a322d);
  --mantine-color-blue-light-hover: color-mix(in srgb, var(--mantine-color-blue-4) 30%, #2a322d);
  --mantine-color-blue-light-color: color-mix(in srgb, var(--mantine-color-blue-2) 78%, #e8e5da);
  --mantine-color-blue-outline: color-mix(in srgb, var(--mantine-color-blue-2) 80%, #dfdcd0);
  --mantine-color-blue-outline-hover: color-mix(in srgb, var(--mantine-color-blue-4) 22%, #2a322d);
  --mantine-color-blue-text: color-mix(in srgb, var(--mantine-color-blue-2) 80%, #e8e5da);
  --mantine-color-cyan-filled: color-mix(in srgb, var(--mantine-color-cyan-3) 62%, #d9d5c7);
  --mantine-color-cyan-filled-hover: color-mix(in srgb, var(--mantine-color-cyan-3) 76%, #d9d5c7);
  --mantine-color-cyan-light: color-mix(in srgb, var(--mantine-color-cyan-4) 20%, #2a322d);
  --mantine-color-cyan-light-hover: color-mix(in srgb, var(--mantine-color-cyan-4) 30%, #2a322d);
  --mantine-color-cyan-light-color: color-mix(in srgb, var(--mantine-color-cyan-2) 78%, #e8e5da);
  --mantine-color-cyan-outline: color-mix(in srgb, var(--mantine-color-cyan-2) 80%, #dfdcd0);
  --mantine-color-cyan-outline-hover: color-mix(in srgb, var(--mantine-color-cyan-4) 22%, #2a322d);
  --mantine-color-cyan-text: color-mix(in srgb, var(--mantine-color-cyan-2) 80%, #e8e5da);
  --mantine-color-teal-filled: color-mix(in srgb, var(--mantine-color-teal-3) 62%, #d9d5c7);
  --mantine-color-teal-filled-hover: color-mix(in srgb, var(--mantine-color-teal-3) 76%, #d9d5c7);
  --mantine-color-teal-light: color-mix(in srgb, var(--mantine-color-teal-4) 20%, #2a322d);
  --mantine-color-teal-light-hover: color-mix(in srgb, var(--mantine-color-teal-4) 30%, #2a322d);
  --mantine-color-teal-light-color: color-mix(in srgb, var(--mantine-color-teal-2) 78%, #e8e5da);
  --mantine-color-teal-outline: color-mix(in srgb, var(--mantine-color-teal-2) 80%, #dfdcd0);
  --mantine-color-teal-outline-hover: color-mix(in srgb, var(--mantine-color-teal-4) 22%, #2a322d);
  --mantine-color-teal-text: color-mix(in srgb, var(--mantine-color-teal-2) 80%, #e8e5da);
  --mantine-color-green-filled: color-mix(in srgb, var(--mantine-color-green-3) 62%, #d9d5c7);
  --mantine-color-green-filled-hover: color-mix(in srgb, var(--mantine-color-green-3) 76%, #d9d5c7);
  --mantine-color-green-light: color-mix(in srgb, var(--mantine-color-green-4) 20%, #2a322d);
  --mantine-color-green-light-hover: color-mix(in srgb, var(--mantine-color-green-4) 30%, #2a322d);
  --mantine-color-green-light-color: color-mix(in srgb, var(--mantine-color-green-2) 78%, #e8e5da);
  --mantine-color-green-outline: color-mix(in srgb, var(--mantine-color-green-2) 80%, #dfdcd0);
  --mantine-color-green-outline-hover: color-mix(in srgb, var(--mantine-color-green-4) 22%, #2a322d);
  --mantine-color-green-text: color-mix(in srgb, var(--mantine-color-green-2) 80%, #e8e5da);
  --mantine-color-lime-filled: color-mix(in srgb, var(--mantine-color-lime-3) 62%, #d9d5c7);
  --mantine-color-lime-filled-hover: color-mix(in srgb, var(--mantine-color-lime-3) 76%, #d9d5c7);
  --mantine-color-lime-light: color-mix(in srgb, var(--mantine-color-lime-4) 20%, #2a322d);
  --mantine-color-lime-light-hover: color-mix(in srgb, var(--mantine-color-lime-4) 30%, #2a322d);
  --mantine-color-lime-light-color: color-mix(in srgb, var(--mantine-color-lime-2) 78%, #e8e5da);
  --mantine-color-lime-outline: color-mix(in srgb, var(--mantine-color-lime-2) 80%, #dfdcd0);
  --mantine-color-lime-outline-hover: color-mix(in srgb, var(--mantine-color-lime-4) 22%, #2a322d);
  --mantine-color-lime-text: color-mix(in srgb, var(--mantine-color-lime-2) 80%, #e8e5da);
  --mantine-color-yellow-filled: color-mix(in srgb, var(--mantine-color-yellow-3) 62%, #d9d5c7);
  --mantine-color-yellow-filled-hover: color-mix(in srgb, var(--mantine-color-yellow-3) 76%, #d9d5c7);
  --mantine-color-yellow-light: color-mix(in srgb, var(--mantine-color-yellow-4) 20%, #2a322d);
  --mantine-color-yellow-light-hover: color-mix(in srgb, var(--mantine-color-yellow-4) 30%, #2a322d);
  --mantine-color-yellow-light-color: color-mix(in srgb, var(--mantine-color-yellow-2) 78%, #e8e5da);
  --mantine-color-yellow-outline: color-mix(in srgb, var(--mantine-color-yellow-2) 80%, #dfdcd0);
  --mantine-color-yellow-outline-hover: color-mix(in srgb, var(--mantine-color-yellow-4) 22%, #2a322d);
  --mantine-color-yellow-text: color-mix(in srgb, var(--mantine-color-yellow-2) 80%, #e8e5da);
  --mantine-color-orange-filled: color-mix(in srgb, var(--mantine-color-orange-3) 62%, #d9d5c7);
  --mantine-color-orange-filled-hover: color-mix(in srgb, var(--mantine-color-orange-3) 76%, #d9d5c7);
  --mantine-color-orange-light: color-mix(in srgb, var(--mantine-color-orange-4) 20%, #2a322d);
  --mantine-color-orange-light-hover: color-mix(in srgb, var(--mantine-color-orange-4) 30%, #2a322d);
  --mantine-color-orange-light-color: color-mix(in srgb, var(--mantine-color-orange-2) 78%, #e8e5da);
  --mantine-color-orange-outline: color-mix(in srgb, var(--mantine-color-orange-2) 80%, #dfdcd0);
  --mantine-color-orange-outline-hover: color-mix(in srgb, var(--mantine-color-orange-4) 22%, #2a322d);
  --mantine-color-orange-text: color-mix(in srgb, var(--mantine-color-orange-2) 80%, #e8e5da);
  --mantine-color-gray-filled: color-mix(in srgb, var(--mantine-color-gray-3) 62%, #d9d5c7);
  --mantine-color-gray-filled-hover: color-mix(in srgb, var(--mantine-color-gray-3) 76%, #d9d5c7);
  --mantine-color-gray-light: color-mix(in srgb, var(--mantine-color-gray-4) 20%, #2a322d);
  --mantine-color-gray-light-hover: color-mix(in srgb, var(--mantine-color-gray-4) 30%, #2a322d);
  --mantine-color-gray-light-color: color-mix(in srgb, var(--mantine-color-gray-2) 78%, #e8e5da);
  --mantine-color-gray-outline: color-mix(in srgb, var(--mantine-color-gray-2) 80%, #dfdcd0);
  --mantine-color-gray-outline-hover: color-mix(in srgb, var(--mantine-color-gray-4) 22%, #2a322d);
  --mantine-color-gray-text: color-mix(in srgb, var(--mantine-color-gray-2) 80%, #e8e5da);
}