@layer tokens {
  :root {
    --indigo-50: #eef0ff;
    --indigo-100: #dde1ff;
    --indigo-200: #bcc3ff;
    --indigo-300: #9ea2ff;
    --indigo-400: #7c80ff;
    --indigo-500: #5457f5;
    --indigo-600: #3a37db;
    --indigo-700: #2e2ab0;
    --indigo-800: #221f80;
    --indigo-900: #17154f;
    --indigo-950: #0e0c33;
    --green-50: #e7f8ee;
    --green-100: #c8eed8;
    --green-300: #5cd08f;
    --green-400: #2fc27a;
    --green-600: #0b7d41;
    --green-700: #0a6e3a;
    --green-900: #053a1f;
    --green-950: #052414;
    --red-50: #fdecec;
    --red-100: #fad2d0;
    --red-300: #ff8a80;
    --red-600: #c9241a;
    --red-700: #a11b13;
    --red-900: #3a1614;
    --amber-50: #fff6dd;
    --amber-100: #ffe9ae;
    --amber-300: #ffc93c;
    --amber-400: #ffb703;
    --amber-700: #7a4f00;
    --amber-900: #3a2a05;
    --pink-50: #fdeaf4;
    --pink-100: #f9cce3;
    --pink-300: #f59acb;
    --pink-400: #f06aae;
    --pink-600: #b81a6b;
    --pink-700: #8e1252;
    --pink-900: #3d0b25;
    --pink-950: #2a0518;
    --gray-0: #fff;
    --gray-25: #f8f9fb;
    --gray-50: #f4f5f7;
    --gray-100: #e6e9ef;
    --gray-200: #d3d8e0;
    --gray-300: #b4bcc8;
    --gray-400: #8c95a4;
    --gray-500: #646d7f;
    --gray-600: #4d5566;
    --gray-700: #363c4a;
    --gray-800: #232733;
    --gray-850: #1a1d27;
    --gray-900: #151821;
    --gray-950: #0e1017;
    --font: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --radius-xs: 4px;
    --radius-s: 6px;
    --radius-m: 8px;
    --radius-l: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;
    --dur-1: .1s;
    --dur-2: .16s;
    --dur-3: .22s;
    --dur-4: .3s;
    --ease-standard: cubic-bezier(.2,0,0,1);
    --dur-slow: .42s;
    --ease-out: cubic-bezier(.2,.8,.2,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
    --measure: 62ch;
    --container: 1328px;
    --gutter: 32px;
    --grid-gap: 16px;
    --control-h: 40px;
    --fs-h2: 700 20px/1.3 var(--font);
    --fs-h3: 600 16px/1.35 var(--font);
    --fs-body: 400 15px/1.5 var(--font);
    --fs-sm: 400 13px/1.4 var(--font);
    --fs-xs: 500 12px/1.35 var(--font);
    --fs-card-title: 500 14px/1.35 var(--font);
    --fs-card-price: 700 18px/1.2 var(--font);
  }

  @media (max-width: 1023px) {
    :root {
      --gutter: 24px;
    }
  }

  @media (max-width: 767px) {
    :root {
      --gutter: 16px;
      --grid-gap: 8px;
      --fs-h2: 700 18px/1.3 var(--font);
      --fs-body: 400 16px/1.5 var(--font);
      --fs-card-title: 500 13px/1.35 var(--font);
      --fs-card-price: 700 17px/1.2 var(--font);
    }
  }

  @media (pointer: coarse) {
    :root {
      --control-h: 44px;
    }
  }

  :root {
    --bg: #faf7f2;
    --bg-soft: #f5f1ea;
    --surface: #fffdf9;
    --surface-2: #f2eee6;
    --surface-3: #e9e3d8;
    --text: #2a2622;
    --text-2: #5b554c;
    --text-3: #6c655a;
    --line: #e9e3d8;
    --line-strong: #d8d0c2;
    --primary: #4c4fb8;
    --primary-hover: #3d3fa0;
    --on-primary: #ffffff;
    --primary-soft: #ecebf8;
    --primary-ink: #3d3fa0;
    --primary-tint: #dcdcf5;
    --best: #3f7d57;
    --on-best: #ffffff;
    --best-soft: #e6f0e6;
    --best-ink: #2d6445;
    --oos: #6c655a;
    --oos-soft: #f2eee6;
    --oos-ink: #5b554c;
    --bank: #a8447a;
    --on-bank: #ffffff;
    --bank-soft: #f7e8ef;
    --bank-ink: #86335f;
    --warn-soft: #fbefd3;
    --warn-ink: #6e4a0a;
    --warn: #d9a23a;
    --star: #d9962b;
    --shadow-1: 0 1px 2px rgb(42,38,34 / .05),0 4px 12px rgb(42,38,34 / .07);
    --shadow-2: 0 8px 24px rgb(42,38,34 / .12),0 2px 6px rgb(42,38,34 / .07);
    --shadow-3: 0 16px 48px rgb(42,38,34 / .18);
    --img-bg: #fffdf9;
    --img-fallback-bg: var(--surface-2);
    --img-blend: multiply;
    --focus: 0 0 0 3px var(--bg),0 0 0 6px var(--primary);
    --scrim: #2a262266;
    color-scheme: light;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #181b26;
      --bg-soft: #1c202c;
      --surface: #212534;
      --surface-2: #2a2f41;
      --surface-3: #353b51;
      --text: #e4e7f0;
      --text-2: #b1b7ca;
      --text-3: #939ab1;
      --line: #323850;
      --line-strong: #434b68;
      --primary: #94a6f2;
      --primary-hover: #a9b8f6;
      --on-primary: #151a3d;
      --primary-soft: #2a3157;
      --primary-ink: #aebaf6;
      --primary-tint: #33407f;
      --best: #86c6a4;
      --on-best: #12301f;
      --best-soft: #1f3430;
      --best-ink: #9bd4b6;
      --oos: #939ab1;
      --oos-soft: #2a2f41;
      --oos-ink: #b1b7ca;
      --bank: #e099c2;
      --on-bank: #3a1230;
      --bank-soft: #3a2b3d;
      --bank-ink: #ebb0d3;
      --warn-soft: #3a3220;
      --warn-ink: #ecc77a;
      --warn: #e0b050;
      --img-bg: #e8eaf2;
      --shadow-1: 0 0 0 1px var(--line-strong);
      --shadow-2: 0 8px 24px #00000066;
      --shadow-3: 0 16px 48px #00000080;
      --img-blend: normal;
      --scrim: #000000a0;
      color-scheme: dark;
    }
  }

  :root[data-theme="dark"] {
    --bg: #181b26;
    --bg-soft: #1c202c;
    --surface: #212534;
    --surface-2: #2a2f41;
    --surface-3: #353b51;
    --text: #e4e7f0;
    --text-2: #b1b7ca;
    --text-3: #939ab1;
    --line: #323850;
    --line-strong: #434b68;
    --primary: #94a6f2;
    --primary-hover: #a9b8f6;
    --on-primary: #151a3d;
    --primary-soft: #2a3157;
    --primary-ink: #aebaf6;
    --primary-tint: #33407f;
    --best: #86c6a4;
    --on-best: #12301f;
    --best-soft: #1f3430;
    --best-ink: #9bd4b6;
    --oos: #939ab1;
    --oos-soft: #2a2f41;
    --oos-ink: #b1b7ca;
    --bank: #e099c2;
    --on-bank: #3a1230;
    --bank-soft: #3a2b3d;
    --bank-ink: #ebb0d3;
    --warn-soft: #3a3220;
    --warn-ink: #ecc77a;
    --warn: #e0b050;
    --img-bg: #e8eaf2;
    --shadow-1: 0 0 0 1px var(--line-strong);
    --shadow-2: 0 8px 24px #00000066;
    --shadow-3: 0 16px 48px #00000080;
    --img-blend: normal;
    --scrim: #000000a0;
    color-scheme: dark;
  }

  :root {
    --lilac-50: #f5f2ff;
    --lilac-100: #ece7ff;
    --lilac-200: #dcd3ff;
    --lilac-300: #bfb0ff;
    --lilac-500: #8e78ea;
    --lilac-900: #2a2266;
    --pet-body: #bfb0ff;
    --pet-shade: #8e78ea;
    --pet-ink: #1f1b4d;
    --pet-glow: var(--amber-300);
    --pet-prop: #fff;
    --pet-stage: #f3effb;
    --pet-night: #14123a;
    --pet-deep: var(--lilac-900);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --pet-body: #b9aaf2;
      --pet-shade: #9a86f5;
      --pet-ink: #1a1840;
      --pet-prop: #eceef6;
      --pet-stage: #262a4a;
    }
  }

  :root[data-theme="dark"] {
    --pet-body: #b9aaf2;
    --pet-shade: #9a86f5;
    --pet-ink: #1a1840;
    --pet-prop: #eceef6;
    --pet-stage: #262a4a;
  }

}

/* product system design additions */
@layer tokens {
  :root {
    --fs-hero: 700 48px/1.05 var(--font);
    --fs-title: 600 28px/1.2 var(--font);
    --fs-price-display: 700 56px/1.02 var(--font);
    --track-tight: -.02em;
    --fs-display: 700 clamp(40px, 9vw, 96px)/1 var(--font);
    --track-display: -.03em;
    --radius-2xl: 20px;
    --material-bar: rgb(250 247 242 / .78);
    --material-blur: 20px;
    --hdr-h: 64px;
    --shadow-knob: 0 2px 4px #0003;
    --ratio-media: 1 / 1;
  }
  @media (max-width: 767px) {
    :root { --fs-hero: 700 32px/1.1 var(--font); --fs-title: 600 22px/1.25 var(--font); --fs-price-display: 700 44px/1.04 var(--font); --hdr-h: 56px; }
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --material-bar: rgb(24 27 38 / .78); }
  }
  :root[data-theme="dark"] { --material-bar: rgb(24 27 38 / .78); }
  @media (prefers-reduced-transparency: reduce) {
    :root { --material-bar: var(--bg); --material-blur: 0px; }
  }
}