Tune it. Preview it. Ship it.

Import "@proyecto-viviana/ui/theme.css" in your global stylesheet, then paste the block below after it. These rules override the --color-* design tokens the components read, so the whole library adopts your theme. The light block only lists tokens that differ from your dark theme, matching how /ui ships its scheme override.

/* Viviana theme — generated by the Theme Studio (proyecto-viviana). */
/* Import "@proyecto-viviana/ui/theme.css" in your global stylesheet, then paste the block below after it. These rules override the --color-* design tokens the components read, so the whole library adopts your theme. The light block only lists tokens that differ from your dark theme, matching how /ui ships its scheme override. */

:root {
  --color-grey-50: #f4f8ff;
  --color-grey-100: #d5dce8;
  --color-grey-200: #b8c2d0;
  --color-grey-300: #929dae;
  --color-grey-400: #5f6b7a;
  --color-grey-500: #47515e;
  --color-grey-600: #2c3646;
  --color-grey-700: #202630;
  --color-grey-800: #161a21;
  --color-grey-900: #0e1014;
  --color-blue-50: #e8f5ff;
  --color-blue-100: #cbe9ff;
  --color-blue-200: #9ad5ff;
  --color-blue-300: #72c3ff;
  --color-blue-400: #5cb2ff;
  --color-blue-500: #4fa5ff;
  --color-blue-600: #457fff;
  --color-blue-700: #3350d8;
  --color-blue-800: #3249c8;
  --color-blue-900: #162d68;
  --color-bg-100: #202630;
  --color-bg-200: #161a21;
  --color-bg-300: #0e1014;
  --color-bg-400: #040506;
  --color-bg-light: #2c3646;
  --color-primary: #4fa5ff;
  --color-primary-50: #0a1632;
  --color-primary-100: #cbe9ff;
  --color-primary-200: #9ad5ff;
  --color-primary-300: #72c3ff;
  --color-primary-400: #5cb2ff;
  --color-primary-500: #4fa5ff;
  --color-primary-600: #457fff;
  --color-primary-700: #3350d8;
  --color-primary-800: #3249c8;
  --color-primary-900: #162d68;
  --color-accent: #898eff;
  --color-accent-50: #0a0b1d;
  --color-accent-100: #dbe2ff;
  --color-accent-200: #bec9ff;
  --color-accent-300: #afbcff;
  --color-accent-400: #9ba6ff;
  --color-accent-500: #898eff;
  --color-accent-600: #9ba6ff;
  --color-accent-700: #afbcff;
  --color-accent-800: #dbe2ff;
  --color-accent-900: #191536;
  --color-accent-highlight: #afbcff;
  --color-success-100: #e5fff3;
  --color-success-200: #102a18;
  --color-success-300: #1a3a25;
  --color-success-400: #c2ffc8;
  --color-success-500: #5bc96e;
  --color-success-600: #238636;
  --color-success-700: #9fefaa;
  --color-success-800: #c2ffc8;
  --color-success-900: #e5fff3;
  --color-warning-100: #fffdf3;
  --color-warning-200: #181404;
  --color-warning-300: #362d08;
  --color-warning-400: #ffe03a;
  --color-warning-500: #f5c800;
  --color-warning-600: #a2860e;
  --color-warning-700: #fff3a6;
  --color-warning-800: #fff8d0;
  --color-warning-900: #fffdf3;
  --color-danger-100: #ffe5e5;
  --color-danger-200: #2a1010;
  --color-danger-300: #401818;
  --color-danger-400: #ff8787;
  --color-danger-500: #e56767;
  --color-danger-600: #da3633;
  --color-danger-700: #ffa8a8;
  --color-danger-800: #ffc7c7;
  --color-danger-900: #ffe5e5;
  --color-cards-bg: #0e1014;
  --color-cards-bg-load: #202630;
  --color-correct: #83f1a7;
  --color-incorrect: #ff6b5e;
  --color-canvas-bg: #040506;
  --color-background: #040506;
  --color-surface: #0e1014;
  --color-surface-elevated: #202630;
  --color-bg-blue-deep: #060f20;
  --color-bg-blue-dark: #0b1832;
  --color-bg-blue-mid: #13244e;
  --color-bg-blue-light: #1d3571;
  --color-text: #ffffff;
  --color-text-secondary: #c6cfdc;
  --color-text-muted: #929dae;
  --color-text-dim: #6d7a8b;
  --color-text-disabled: #3a444e;
  --color-border: #202630;
  --color-border-muted: #161a21;
  --color-divider: #161a21;
  --color-success: #3fb950;
  --color-success-dim: #238636;
  --color-warning: #ffe03a;
  --color-warning-dim: #a2860e;
  --color-danger: #ff6b5e;
  --color-danger-dim: #c0362c;
  --color-primary-dim: #1d3571;
  --color-accent-dim: #1b1b3f;
  --color-header-bg: #090a0d;
  --color-primary-glow: rgba(79, 165, 255, 0.55);
  --color-accent-glow: rgba(137, 142, 255, 0.5);
  --color-fusion-glow: rgba(255, 79, 195, 0.4);
  --color-success-bg: rgba(63, 185, 80, 0.1);
  --color-warning-bg: rgba(255, 224, 58, 0.12);
  --color-danger-bg: rgba(255, 107, 94, 0.12);
}

[data-color-scheme="light"] {
  --color-grey-50: #f3f4f6;
  --color-grey-100: #f5f5f5;
  --color-grey-200: #e5e5e5;
  --color-grey-300: #d4d4d4;
  --color-grey-400: #a3a3a3;
  --color-grey-500: #737373;
  --color-grey-600: #525252;
  --color-grey-700: #404040;
  --color-grey-800: #262626;
  --color-grey-900: #171717;
  --color-blue-50: #eff4ff;
  --color-blue-100: #0f1d41;
  --color-blue-200: #132751;
  --color-blue-300: #1b3870;
  --color-blue-400: #2945ac;
  --color-blue-500: #3d5cee;
  --color-blue-600: #3550d3;
  --color-blue-700: #73a4e2;
  --color-blue-800: #a9cdf5;
  --color-blue-900: #13224b;
  --color-bg-100: #7ba0b3;
  --color-bg-200: #aebccb;
  --color-bg-300: #cdd8e4;
  --color-bg-400: #e2e9f1;
  --color-bg-light: #ffffff;
  --color-primary: #3d5cee;
  --color-primary-50: #eff4ff;
  --color-primary-100: #0f1d41;
  --color-primary-200: #132751;
  --color-primary-300: #1b3870;
  --color-primary-400: #2945ac;
  --color-primary-500: #3d5cee;
  --color-primary-600: #3550d3;
  --color-primary-700: #73a4e2;
  --color-primary-800: #a9cdf5;
  --color-primary-900: #13224b;
  --color-accent: #7463e9;
  --color-accent-50: #f1f4ff;
  --color-accent-100: #f8f9ff;
  --color-accent-200: #3c3889;
  --color-accent-300: #9ba7ff;
  --color-accent-400: #7463e9;
  --color-accent-500: #4e45a7;
  --color-accent-600: #6154c7;
  --color-accent-700: #4e45a7;
  --color-accent-800: #3c3889;
  --color-accent-900: #e4e9ff;
  --color-accent-highlight: #6154c7;
  --color-success-200: #c2ffc8;
  --color-success-300: #9fefaa;
  --color-success-400: #1a7f37;
  --color-success-600: #116329;
  --color-success-700: #3d7a5f;
  --color-success-800: #2a5741;
  --color-success-900: #1a3529;
  --color-warning-100: #fffdf2;
  --color-warning-200: #fff8d0;
  --color-warning-300: #ffeb80;
  --color-warning-400: #7a5f00;
  --color-warning-600: #5a4600;
  --color-warning-700: #7a6d42;
  --color-warning-800: #574d2f;
  --color-warning-900: #352f1c;
  --color-danger-200: #ffc7c7;
  --color-danger-300: #ffa8a8;
  --color-danger-400: #cf222e;
  --color-danger-600: #a40e26;
  --color-danger-700: #7a4242;
  --color-danger-800: #572f2f;
  --color-danger-900: #351c1c;
  --color-cards-bg: #ffffff;
  --color-cards-bg-load: #eef3f9;
  --color-correct: #1a7f37;
  --color-incorrect: #cf222e;
  --color-canvas-bg: #f3f6fa;
  --color-background: #f3f6fa;
  --color-surface: #ffffff;
  --color-surface-elevated: #e7edf5;
  --color-bg-blue-deep: #ebf3ff;
  --color-bg-blue-dark: #d5e8ff;
  --color-bg-blue-mid: #accfff;
  --color-bg-blue-light: #84b5ff;
  --color-text: #0f1622;
  --color-text-secondary: #405d70;
  --color-text-muted: #94a3b8;
  --color-text-dim: #64748b;
  --color-text-disabled: #c4d0de;
  --color-border: #dce4ee;
  --color-border-muted: #eaeff6;
  --color-divider: #eaeff6;
  --color-success: #5bc96e;
  --color-success-dim: #559d87;
  --color-warning: #f5c800;
  --color-warning-dim: #c9a000;
  --color-danger: #d92d20;
  --color-danger-dim: #9b1c13;
  --color-primary-dim: #d5e8ff;
  --color-accent-dim: #d8e1ff;
  --color-header-bg: #e7edf5;
  --color-primary-glow: rgba(61, 92, 238, 0.4);
  --color-accent-glow: rgba(116, 99, 233, 0.35);
  --color-fusion-glow: rgba(217, 18, 143, 0.3);
  --color-warning-bg: rgba(245, 200, 0, 0.18);
  --color-danger-bg: rgba(217, 45, 32, 0.1);
}