/* Catshroom Store — generated from tokens.json */
/* Não edite à mão: rode node Gerar-Tokens-Loja.mjs (docs\ARQUITETURA.md, "Design system da loja"). */
:root,
[data-theme="light"] {
  --white: #ffffff;
  --plum-50: #f5f2fb;
  --plum-100: #efeafb;
  --plum-200: #e0d9ef;
  --plum-300: #cfc6e6;
  --plum-400: #a39cbd;
  --plum-500: #8a81a6;
  --plum-600: #5f5877;
  --plum-700: #3a3156;
  --plum-800: #2e2647;
  --plum-850: #261f38;
  --plum-900: #1f1b2e;
  --plum-950: #14101d;
  --grape-100: #efeafb;
  --grape-200: #dccffa;
  --grape-300: #c8b6f8;
  --grape-400: #a68bf0;
  --grape-500: #7b57d6;
  --grape-600: #6a44c4;
  --grape-700: #5a37ad;
  --grape-800: #3f2689;
  --mint-100: #def5ee;
  --mint-200: #bfeade;
  --mint-300: #8fdcc6;
  --mint-400: #55bfa4;
  --mint-500: #1f7566;
  --mint-600: #195d51;
  --mint-800: #1b3b36;
  --mint-900: #102a26;
  --nose-100: #fde6f0;
  --nose-300: #f5a3c6;
  --nose-400: #ef7fb0;
  --nose-500: #e8579a;
  --nose-600: #d63f86;
  --nose-700: #a82466;
  --nose-900: #3f1a2f;
  --cream-50: #fffcf6;
  --cream-100: #fbf7ef;
  --cream-200: #f2e8d3;
  --cream-300: #e4d5b3;
  --green-100: #dff3e7;
  --green-300: #6fd69a;
  --green-700: #1f7a45;
  --green-900: #1a3a2a;
  --amber-100: #fff1d6;
  --amber-300: #f5c26b;
  --amber-500: #b86e00;
  --amber-800: #7a4a00;
  --amber-900: #3b2e14;
  --red-100: #fde6e3;
  --red-200: #ffb3a8;
  --red-300: #ff8a7a;
  --red-700: #c0392b;
  --red-800: #a32a1f;
  --red-900: #3d2020;
  --blue-100: #e2eefb;
  --blue-300: #8ab8f0;
  --blue-700: #245fa8;
  --blue-900: #1b2a40;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
  --duration-loop: 1200ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1600px;
  --bp-ultra: 2200px;
  --container-content: 1280px;
  --container-wide: 1520px;
  --container-ultra: 1760px;
  --container-narrow: 720px;
  --measure: 68ch;
  --touch-min: 44px;
  --h-control-sm: 36px;
  --h-control-md: 44px;
  --h-control-lg: 52px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --border-1: 1px;
  --border-2: 2px;
  --border-focus: 3px;
  --font-display: "Gabarito", "Nunito", ui-rounded, system-ui, sans-serif;
  --font-sans: "Figtree", system-ui, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --bg-page: var(--cream-100);
  --bg-alt: var(--plum-50);
  --surface: var(--white);
  --surface-raised: var(--white);
  --stage: var(--plum-100);
  --scrim: #1f1b2e99;
  --ink: var(--plum-900);
  --ink-muted: var(--plum-600);
  --ink-inverse: var(--cream-100);
  --border: var(--plum-200);
  --border-strong: var(--plum-500);
  --layer-line: var(--plum-200);
  --primary: var(--grape-500);
  --primary-hover: var(--grape-600);
  --primary-active: var(--grape-700);
  --primary-edge: var(--grape-700);
  --primary-subtle: var(--grape-100);
  --primary-strong: var(--grape-700);
  --on-primary: var(--white);
  --link: var(--grape-600);
  --secondary: var(--mint-500);
  --secondary-hover: var(--mint-600);
  --secondary-subtle: var(--mint-100);
  --secondary-strong: var(--mint-600);
  --on-secondary: var(--white);
  --accent: var(--nose-500);
  --accent-hover: var(--nose-400);
  --accent-edge: var(--nose-700);
  --accent-subtle: var(--nose-100);
  --accent-strong: var(--nose-700);
  --on-accent: var(--plum-900);
  --success: var(--green-700);
  --success-subtle: var(--green-100);
  --warning: var(--amber-800);
  --warning-subtle: var(--amber-100);
  --error: var(--red-700);
  --error-hover: var(--red-800);
  --error-subtle: var(--red-100);
  --on-error: var(--white);
  --info: var(--blue-700);
  --info-subtle: var(--blue-100);
  --focus-ring: var(--grape-800);
  --hover-surface: var(--plum-100);
  --active-surface: var(--plum-200);
  --disabled-bg: var(--plum-100);
  --disabled-ink: var(--plum-500);
  --rating: var(--amber-500);
  --shadow-1: 0 1px 2px #1f1b2e14, 0 2px 8px #1f1b2e0f;
  --shadow-2: 0 4px 16px #1f1b2e1f;
  --shadow-3: 0 16px 48px #1f1b2e33;
  --shadow-layer: 0 2px 0 0 #e0d9ef, 0 4px 0 0 #efeafb;
  --shadow-edge: 0 3px 0 0 #5a37ad;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg-page: var(--plum-950);
  --bg-alt: var(--plum-900);
  --surface: var(--plum-850);
  --surface-raised: var(--plum-800);
  --stage: var(--plum-800);
  --scrim: #000000b3;
  --ink: var(--plum-50);
  --ink-muted: var(--plum-400);
  --ink-inverse: var(--plum-950);
  --border: var(--plum-700);
  --border-strong: var(--plum-400);
  --layer-line: var(--plum-700);
  --primary: var(--grape-400);
  --primary-hover: var(--grape-300);
  --primary-active: var(--grape-200);
  --primary-edge: var(--grape-600);
  --primary-subtle: var(--plum-800);
  --primary-strong: var(--grape-200);
  --on-primary: var(--plum-950);
  --link: var(--grape-300);
  --secondary: var(--mint-300);
  --secondary-hover: var(--mint-200);
  --secondary-subtle: var(--mint-800);
  --secondary-strong: var(--mint-200);
  --on-secondary: var(--mint-900);
  --accent: var(--nose-400);
  --accent-hover: var(--nose-300);
  --accent-edge: var(--nose-600);
  --accent-subtle: var(--nose-900);
  --accent-strong: var(--nose-300);
  --on-accent: var(--plum-950);
  --success: var(--green-300);
  --success-subtle: var(--green-900);
  --warning: var(--amber-300);
  --warning-subtle: var(--amber-900);
  --error: var(--red-300);
  --error-hover: var(--red-200);
  --error-subtle: var(--red-900);
  --on-error: var(--plum-950);
  --info: var(--blue-300);
  --info-subtle: var(--blue-900);
  --focus-ring: var(--grape-300);
  --hover-surface: var(--plum-800);
  --active-surface: var(--plum-700);
  --disabled-bg: var(--plum-800);
  --disabled-ink: var(--plum-500);
  --rating: var(--amber-300);
  --shadow-1: 0 1px 2px #00000066, 0 2px 8px #00000040;
  --shadow-2: 0 4px 16px #00000073;
  --shadow-3: 0 16px 48px #0000008c;
  --shadow-layer: 0 2px 0 0 #3a3156, 0 4px 0 0 #2e2647;
  --shadow-edge: 0 3px 0 0 #6a44c4;
  color-scheme: dark;
}

.display-xl {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 68px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.display-lg {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 54px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.display-md {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 46px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.heading-1 {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.heading-2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 38px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.heading-3 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
}

.heading-4 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
}

.body-lg {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
}

.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.body-sm {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.label {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.label-lg {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.ui-lg {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
}

.ui {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.ui-sm {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
}

.price-lg {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 36px;
  font-weight: 800;
}

.price {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 28px;
  font-weight: 800;
}

.price-sm {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
}

.price-old {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.spec {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
}