/* OfferBuggy Visual Kit: theme tokens.
   Change the 4 brand colours (and optionally radius/font) and every scene, icon, loader and component follows.
   Works in light and dark: set data-vk-theme="dark" | "light" on <html> (or any wrapper), or leave it to follow the system. */
:root, [data-vk-theme] {
  --vk-main: #6d4aff;      /* brand colour: buttons, highlights, main shapes */
  --vk-accent: #17c48a;    /* second colour: success, ticks, secondary shapes */
  --vk-warm: #ffb21e;      /* small sparkles, stars, warnings */
  --vk-danger: #f03d6b;    /* errors, delete, offline */
  --vk-radius: 14px;
  --vk-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --vk-bg: #f7f6fb;
  --vk-surface: #ffffff;
  --vk-ink: #17152a;
  --vk-muted: #6c6a80;
  --vk-line: #e8e6f0;
  --vk-on-main: #ffffff;   /* text on top of --vk-main (the theme picker sets this for contrast) */
  --vk-shadow: 0 10px 28px -18px rgb(30 15 80 / .45);
  --vk-motion: 1;          /* set to 0 to stop all animation */

  /* derived shades: no need to edit */
  --vk-main-soft: color-mix(in oklab, var(--vk-main) 12%, var(--vk-surface));
  --vk-main-tint: color-mix(in oklab, var(--vk-main) 30%, var(--vk-surface));
  --vk-main-light: color-mix(in oklab, var(--vk-main) 55%, white);
  --vk-main-deep: color-mix(in oklab, var(--vk-main) 72%, black);
  --vk-accent-soft: color-mix(in oklab, var(--vk-accent) 14%, var(--vk-surface));
  --vk-accent-light: color-mix(in oklab, var(--vk-accent) 55%, white);
  --vk-accent-deep: color-mix(in oklab, var(--vk-accent) 72%, black);
  --vk-warm-light: color-mix(in oklab, var(--vk-warm) 50%, white);
  --vk-warm-deep: color-mix(in oklab, var(--vk-warm) 75%, black);
  --vk-danger-soft: color-mix(in oklab, var(--vk-danger) 12%, var(--vk-surface));
  --vk-danger-light: color-mix(in oklab, var(--vk-danger) 50%, white);
  --vk-danger-deep: color-mix(in oklab, var(--vk-danger) 72%, black);
  --vk-paper: color-mix(in oklab, var(--vk-main) 4%, var(--vk-surface));   /* scene "paper" objects */
  --vk-paper-edge: color-mix(in oklab, var(--vk-main) 14%, var(--vk-surface));
  --vk-ground: color-mix(in oklab, var(--vk-main) 9%, var(--vk-bg));        /* soft floor shadow under scenes */
  --vk-hover: color-mix(in oklab, var(--vk-ink) 5%, transparent);
  --vk-focus: 0 0 0 3px color-mix(in oklab, var(--vk-main) 40%, transparent);
  /* light/dark dependent values used inside components (kept here so every browser, incl. Firefox, follows the mode) */
  --vk-ghost-ink: var(--vk-main-deep);
  --vk-icon-mix: 90%;
  --vk-skeleton-hi: rgb(255 255 255 / .55);
  --vk-scene-l1: var(--vk-main-tint); --vk-scene-l2: var(--vk-paper-edge);
  --vk-scene-p1: color-mix(in oklab, var(--vk-paper) 84%, white); --vk-scene-p2: var(--vk-paper);
  --vk-scene-pe1: var(--vk-paper); --vk-scene-pe2: var(--vk-paper-edge);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-vk-theme="light"]) {
    --vk-bg: #0f0d1a; --vk-surface: #18152b; --vk-ink: #efedf8; --vk-muted: #a3a0b8; --vk-line: #2d2943;
    --vk-shadow: 0 12px 30px -16px rgb(0 0 0 / .7);
    --vk-main-light: color-mix(in oklab, var(--vk-main) 70%, white);
    --vk-ghost-ink: var(--vk-main-light); --vk-icon-mix: 66%; --vk-skeleton-hi: rgb(255 255 255 / .07);
    --vk-scene-l1: color-mix(in oklab, var(--vk-main) 48%, white); --vk-scene-l2: color-mix(in oklab, var(--vk-paper-edge) 58%, white);
    --vk-scene-p1: color-mix(in oklab, var(--vk-paper-edge) 20%, white); --vk-scene-p2: color-mix(in oklab, var(--vk-paper-edge) 34%, white);
    --vk-scene-pe1: color-mix(in oklab, var(--vk-paper-edge) 46%, white); --vk-scene-pe2: color-mix(in oklab, var(--vk-paper-edge) 60%, white);
  }
}
[data-vk-theme="dark"] {
  --vk-bg: #0f0d1a; --vk-surface: #18152b; --vk-ink: #efedf8; --vk-muted: #a3a0b8; --vk-line: #2d2943;
  --vk-shadow: 0 12px 30px -16px rgb(0 0 0 / .7);
  --vk-main-light: color-mix(in oklab, var(--vk-main) 70%, white);
  --vk-ghost-ink: var(--vk-main-light); --vk-icon-mix: 66%; --vk-skeleton-hi: rgb(255 255 255 / .07);
  --vk-scene-l1: color-mix(in oklab, var(--vk-main) 48%, white); --vk-scene-l2: color-mix(in oklab, var(--vk-paper-edge) 58%, white);
  --vk-scene-p1: color-mix(in oklab, var(--vk-paper-edge) 20%, white); --vk-scene-p2: color-mix(in oklab, var(--vk-paper-edge) 34%, white);
  --vk-scene-pe1: color-mix(in oklab, var(--vk-paper-edge) 46%, white); --vk-scene-pe2: color-mix(in oklab, var(--vk-paper-edge) 60%, white);
}
@media (prefers-reduced-motion: reduce) { :root { --vk-motion: 0; } }