@proyecto-viviana/ui 0.1.0

package/dist/separator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/separator/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAgC,MAAM,UAAU,CAAC;AAClE,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAMhF,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC/D,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,MAAM,WAAW,cAAc;IAC7B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,mDAAmD;IACnD,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,yDAAyD;IACzD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA4BD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAkE5D"}

package/dist/styles.css

@@ -0,0 +1,450 @@
+/*
+ * Viviana UI Complete Styles (Theme + Components)
+ *
+ * WARNING: This file contains @theme which cannot be @imported in Tailwind v4.
+ * Use components.css instead and copy the @theme block from theme.css.
+ *
+ * For proper usage, see theme.css documentation.
+ */
+
+/* ===== THEME ===== */
+@theme {
+  /* Breakpoints */
+  --breakpoint-xxs: 320px;
+  --breakpoint-xs: 475px;
+
+  /* Background - Dark blue-gray */
+  --color-bg-100: #3B5260;
+  --color-bg-200: #293E4B;
+  --color-bg-300: #24313a;
+  --color-bg-400: #1D272E;
+  --color-bg-light: #515151;
+
+  /* Accent - Pink */
+  --color-accent: #DF5C9A;
+  --color-accent-200: #FFB2D7;
+  --color-accent-300: #FF88C0;
+  --color-accent-500: #DF5C9A;
+  --color-accent-highlight: #e2a2be;
+
+  /* Primary - Cyan/Blue */
+  --color-primary-100: #D9F2FF;
+  --color-primary-200: #D0E9F5;
+  --color-primary-300: #ADCCDC;
+  --color-primary-400: #B8DFFF;
+  --color-primary-500: #75ABC7;
+  --color-primary-600: #58748B;
+  --color-primary-700: #4F6D85;
+  --color-primary-800: #4C6477;
+
+  /* Success - Green */
+  --color-success-100: #E5FFF3;
+  --color-success-400: #C2FFC8;
+  --color-success-600: #559D87;
+
+  /* Warning - Yellow */
+  --color-warning-100: #FFFBE5;
+  --color-warning-400: #FFDD87;
+  --color-warning-600: #9D8D55;
+
+  /* Danger - Red */
+  --color-danger-100: #FFE5E5;
+  --color-danger-400: #FF8787;
+  --color-danger-600: #9D5555;
+
+  /* Cards */
+  --color-cards-bg: #373737;
+  --color-cards-bg-load: #484848;
+  --color-correct: #83f1a7;
+  --color-incorrect: #e74c3c;
+
+  /* Typography */
+  --font-sen: 'Sen', sans-serif;
+  --font-jost: 'Jost', sans-serif;
+  --font-sans: 'Sen', sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+}
+
+/* ===== FONT UTILITIES ===== */
+.font-sen {
+  font-family: 'Sen', sans-serif;
+}
+
+.font-jost {
+  font-family: 'Jost', sans-serif;
+}
+
+/* ===== CUSTOM SHADOWS ===== */
+.drop-shadow-title-card {
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.drop-shadow-logo {
+  filter: drop-shadow(0 0 10px rgba(223, 92, 154, 0.8));
+}
+
+.shadow-primary-chip {
+  box-shadow: 0 2px 8px rgba(79, 109, 133, 0.4);
+}
+
+/* ===== BUTTON COMPONENT ===== */
+.vui-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  font-weight: 500;
+  border-radius: 0.5rem;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  border: none;
+  outline: none;
+}
+
+.vui-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-bg-400), 0 0 0 4px var(--color-accent-300);
+}
+
+.vui-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.vui-button.is-pressed {
+  transform: scale(0.98);
+}
+
+/* Fill variants - pokeforos style */
+/* Primary = Pink accent (main CTA) */
+.vui-button--fill.vui-button--primary {
+  background: var(--color-accent);
+  color: white;
+}
+.vui-button--fill.vui-button--primary:hover:not(:disabled) {
+  background: var(--color-accent-300);
+}
+.vui-button--fill.vui-button--primary:active:not(:disabled) {
+  background: var(--color-accent-500);
+}
+
+/* Secondary = Cyan primary */
+.vui-button--fill.vui-button--secondary {
+  background: var(--color-primary-500);
+  color: white;
+}
+.vui-button--fill.vui-button--secondary:hover:not(:disabled) {
+  background: var(--color-primary-400);
+}
+.vui-button--fill.vui-button--secondary:active:not(:disabled) {
+  background: var(--color-primary-600);
+}
+
+/* Accent = Also pink (alias for primary look) */
+.vui-button--fill.vui-button--accent {
+  background: var(--color-accent);
+  color: white;
+}
+.vui-button--fill.vui-button--accent:hover:not(:disabled) {
+  background: var(--color-accent-300);
+}
+.vui-button--fill.vui-button--accent:active:not(:disabled) {
+  background: var(--color-accent-500);
+}
+
+/* Negative = Danger red */
+.vui-button--fill.vui-button--negative {
+  background: var(--color-danger-400);
+  color: white;
+}
+.vui-button--fill.vui-button--negative:hover:not(:disabled) {
+  background: var(--color-danger-600);
+}
+.vui-button--fill.vui-button--negative:active:not(:disabled) {
+  background: var(--color-danger-400);
+}
+
+/* Outline variants */
+.vui-button--outline.vui-button--primary {
+  border: 2px solid var(--color-accent);
+  color: var(--color-accent-200);
+  background: transparent;
+}
+.vui-button--outline.vui-button--primary:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
+}
+
+.vui-button--outline.vui-button--secondary {
+  border: 2px solid var(--color-primary-500);
+  color: var(--color-primary-300);
+  background: transparent;
+}
+.vui-button--outline.vui-button--secondary:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--color-primary-500) 15%, transparent);
+}
+
+.vui-button--outline.vui-button--accent {
+  border: 2px solid var(--color-accent);
+  color: var(--color-accent-200);
+  background: transparent;
+}
+.vui-button--outline.vui-button--accent:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
+}
+
+.vui-button--outline.vui-button--negative {
+  border: 2px solid var(--color-danger-400);
+  color: var(--color-danger-100);
+  background: transparent;
+}
+.vui-button--outline.vui-button--negative:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--color-danger-400) 15%, transparent);
+}
+
+/* ===== CHIP COMPONENT ===== */
+.vui-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: 9999px;
+  text-transform: uppercase;
+}
+
+.vui-chip--primary {
+  background: var(--color-primary-700);
+  color: var(--color-primary-100);
+  box-shadow: 0 2px 8px rgba(79, 109, 133, 0.4);
+}
+
+.vui-chip--accent {
+  background: var(--color-accent);
+  color: white;
+}
+
+.vui-chip--success {
+  background: var(--color-success-600);
+  color: var(--color-success-100);
+}
+
+.vui-chip--warning {
+  background: var(--color-warning-600);
+  color: var(--color-warning-100);
+}
+
+.vui-chip--danger {
+  background: var(--color-danger-600);
+  color: var(--color-danger-100);
+}
+
+/* ===== BADGE COMPONENT ===== */
+.vui-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.375rem;
+}
+
+.vui-badge--primary {
+  background: var(--color-primary-700);
+  color: var(--color-primary-100);
+}
+
+.vui-badge--accent {
+  background: var(--color-accent);
+  color: white;
+}
+
+.vui-badge--success {
+  background: var(--color-success-600);
+  color: var(--color-success-100);
+}
+
+.vui-badge--warning {
+  background: var(--color-warning-600);
+  color: var(--color-warning-100);
+}
+
+.vui-badge--danger {
+  background: var(--color-danger-600);
+  color: var(--color-danger-100);
+}
+
+/* ===== ALERT COMPONENT ===== */
+.vui-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  border-width: 1px;
+}
+
+.vui-alert--info {
+  background: color-mix(in srgb, var(--color-primary-700) 20%, transparent);
+  border-color: var(--color-primary-600);
+  color: var(--color-primary-200);
+}
+
+.vui-alert--success {
+  background: color-mix(in srgb, var(--color-success-600) 20%, transparent);
+  border-color: var(--color-success-600);
+  color: var(--color-success-100);
+}
+
+.vui-alert--warning {
+  background: color-mix(in srgb, var(--color-warning-600) 20%, transparent);
+  border-color: var(--color-warning-600);
+  color: var(--color-warning-100);
+}
+
+.vui-alert--error {
+  background: color-mix(in srgb, var(--color-danger-600) 20%, transparent);
+  border-color: var(--color-danger-400);
+  color: var(--color-danger-100);
+}
+
+/* ===== AVATAR COMPONENT ===== */
+.vui-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  overflow: hidden;
+  background: var(--color-bg-300);
+  color: var(--color-primary-300);
+  font-weight: 600;
+}
+
+.vui-avatar--sm {
+  width: 2rem;
+  height: 2rem;
+  font-size: 0.75rem;
+}
+
+.vui-avatar--md {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 0.875rem;
+}
+
+.vui-avatar--lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1rem;
+}
+
+.vui-avatar--xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 1.25rem;
+}
+
+/* ===== CARD COMPONENT ===== */
+.vui-card {
+  background: var(--color-bg-300);
+  border: 1px solid var(--color-primary-600);
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+
+.vui-card--accent-border {
+  border-bottom-color: var(--color-accent-500);
+}
+
+/* ===== GRADIENTS ===== */
+.hero-gradient {
+  background: linear-gradient(135deg, var(--color-bg-300) 0%, var(--color-bg-400) 100%);
+}
+
+.gradient-text {
+  background: linear-gradient(135deg, var(--color-primary-300), var(--color-accent-300));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* ===== PROSE/DOCS ===== */
+.prose {
+  max-width: 65ch;
+}
+
+.prose h1 {
+  font-size: 2.25rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  color: var(--color-primary-100);
+}
+
+.prose h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-top: 2rem;
+  margin-bottom: 0.75rem;
+  color: var(--color-primary-200);
+}
+
+.prose h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+  color: var(--color-primary-200);
+}
+
+.prose p {
+  margin-bottom: 1rem;
+  line-height: 1.75;
+  color: var(--color-primary-300);
+}
+
+.prose code {
+  background: var(--color-bg-300);
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  color: var(--color-accent-200);
+}
+
+.prose pre {
+  background: var(--color-bg-400);
+  color: var(--color-primary-100);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+
+.prose pre code {
+  background: transparent;
+  padding: 0;
+  color: inherit;
+}
+
+/* ===== SIDEBAR ===== */
+.sidebar-link {
+  display: block;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  color: var(--color-primary-300);
+  transition: all 0.15s;
+}
+
+.sidebar-link:hover {
+  background: var(--color-bg-300);
+  color: var(--color-primary-100);
+}
+
+.sidebar-link.active {
+  background: var(--color-primary-700);
+  color: var(--color-primary-100);
+  font-weight: 500;
+}

package/dist/switch/ToggleSwitch.d.ts

@@ -0,0 +1,28 @@
+/**
+ * ToggleSwitch component for proyecto-viviana-ui
+ *
+ * A styled switch component built on top of solidaria-components.
+ * This component only handles styling - all behavior and accessibility
+ * is provided by the headless Switch from solidaria-components.
+ *
+ * Named "ToggleSwitch" to avoid conflict with SolidJS's built-in Switch component.
+ */
+import { type JSX } from 'solid-js';
+import { type ToggleSwitchProps as HeadlessToggleSwitchProps } from '@proyecto-viviana/solidaria-components';
+export type SwitchSize = 'sm' | 'md' | 'lg';
+export interface ToggleSwitchProps extends Omit<HeadlessToggleSwitchProps, 'class' | 'children'> {
+    /** The size of the switch. */
+    size?: SwitchSize;
+    /** Additional CSS class name. */
+    class?: string;
+    /** Label text for the switch. */
+    children?: JSX.Element;
+}
+/**
+ * A switch allows users to toggle between two mutually exclusive states.
+ *
+ * Built on solidaria-components Switch for full accessibility support.
+ * Named "ToggleSwitch" to avoid conflict with SolidJS's built-in Switch component.
+ */
+export declare function ToggleSwitch(props: ToggleSwitchProps): JSX.Element;
+//# sourceMappingURL=ToggleSwitch.d.ts.map

package/dist/switch/ToggleSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSwitch.d.ts","sourceRoot":"","sources":["../../src/switch/ToggleSwitch.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,KAAK,GAAG,EAA6C,MAAM,UAAU,CAAC;AAC/E,OAAO,EAAwC,KAAK,iBAAiB,IAAI,yBAAyB,EAAgC,MAAM,wCAAwC,CAAC;AAMjL,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,yBAAyB,EAAE,OAAO,GAAG,UAAU,CAAC;IAC9F,8BAA8B;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACxB;AA4BD;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAoDlE"}

package/dist/switch/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Switch components for proyecto-viviana-ui
+ *
+ * This file exports:
+ * - ToggleSwitch: The primary switch component built on solidaria-components
+ *                 (named to avoid conflict with SolidJS's built-in Switch)
+ * - TabSwitch: A custom two-option tab selector
+ */
+import { type JSX } from 'solid-js';
+export { ToggleSwitch, type ToggleSwitchProps, type SwitchSize } from './ToggleSwitch';
+interface SwitchOption {
+    label: string;
+    value: string;
+}
+export interface TabSwitchProps {
+    options: SwitchOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    class?: string;
+}
+/**
+ * A tab-style switch that allows users to select between two options.
+ * This is a custom component, not based on solidaria/react-aria.
+ */
+export declare function TabSwitch(props: TabSwitchProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/switch/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,KAAK,GAAG,EAA8B,MAAM,UAAU,CAAA;AAG/D,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAMtF,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAuD5D"}

package/dist/test-utils/index.d.ts

@@ -0,0 +1,44 @@
+import userEvent from '@testing-library/user-event';
+/**
+ * Pointer map matching react-spectrum's test setup.
+ * Ensures pointer events have realistic dimensions so they aren't mistaken for virtual clicks.
+ */
+export declare const pointerMap: ({
+    name: string;
+    pointerType: string;
+    button: string;
+    height: number;
+    width: number;
+    pressure: number;
+} | {
+    name: string;
+    pointerType: string;
+    button: string;
+    height?: undefined;
+    width?: undefined;
+    pressure?: undefined;
+} | {
+    name: string;
+    pointerType: string;
+    height: number;
+    width: number;
+    button?: undefined;
+    pressure?: undefined;
+} | {
+    name: string;
+    pointerType: string;
+    button?: undefined;
+    height?: undefined;
+    width?: undefined;
+    pressure?: undefined;
+})[];
+/**
+ * Set up userEvent with react-spectrum's configuration.
+ * - delay: null - No artificial delays between actions
+ * - pointerMap - Realistic pointer event dimensions
+ * - pointerEventsCheck: Never - Skip pointer-events CSS check (jsdom doesn't handle this well)
+ */
+export declare function setupUser(): import("@testing-library/user-event").UserEvent;
+export { render, screen, fireEvent, cleanup } from '@solidjs/testing-library';
+export { userEvent };
+//# sourceMappingURL=index.d.ts.map

package/dist/test-utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/test-utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAGpD;;;GAGG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAOtB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,SAAS,oDAMxB;AAED,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/textfield/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * TextField component for proyecto-viviana-ui
+ *
+ * A styled text field component built on solidaria hooks directly.
+ * This bypasses solidaria-components for now due to context timing issues.
+ */
+import { type JSX } from 'solid-js';
+import { type AriaTextFieldProps } from '@proyecto-viviana/solidaria';
+export type TextFieldSize = 'sm' | 'md' | 'lg';
+export type TextFieldVariant = 'outline' | 'filled';
+export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children'> {
+    /** The size of the text field. */
+    size?: TextFieldSize;
+    /** The visual variant of the text field. */
+    variant?: TextFieldVariant;
+    /** Additional CSS class name. */
+    class?: string;
+    /** Label text for the input. */
+    label?: string;
+    /** Description text shown below the input. */
+    description?: string;
+    /** Error message shown when invalid. */
+    errorMessage?: string;
+}
+/**
+ * A text field allows users to enter a plain text value with a keyboard.
+ *
+ * Built directly on solidaria hooks for full accessibility support.
+ */
+export declare function TextField(props: TextFieldProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/textfield/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/textfield/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAmD,MAAM,UAAU,CAAA;AACpF,OAAO,EAGL,KAAK,kBAAkB,EACxB,MAAM,6BAA6B,CAAA;AASpC,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAC9C,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEnD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC;IAC1E,kCAAkC;IAClC,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AA4BD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CA4I5D"}

package/dist/theme.css

@@ -0,0 +1,101 @@
+/*
+ * Viviana UI Theme - Tailwind v4
+ *
+ * IMPORTANT: Due to Tailwind v4's @theme processing, the @theme block
+ * should be COPIED into your app's CSS, not imported via @import.
+ *
+ * Usage:
+ *
+ * 1. Add fonts in HTML <head>:
+ *    <link rel="preconnect" href="https://fonts.googleapis.com">
+ *    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ *    <link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Sen:wght@400..800&display=swap" rel="stylesheet">
+ *
+ * 2. In your app's CSS:
+ *    @import "tailwindcss";
+ *
+ *    @theme {
+ *      // Copy the @theme block below into your CSS
+ *    }
+ *
+ *    @import "proyecto-viviana-ui/components.css";
+ */
+
+@theme {
+  /* Breakpoints */
+  --breakpoint-xxs: 320px;
+  --breakpoint-xs: 475px;
+
+  /* Background - Dark blue-gray */
+  --color-bg-100: #3B5260;
+  --color-bg-200: #293E4B;
+  --color-bg-300: #24313a;
+  --color-bg-400: #1D272E;
+  --color-bg-light: #515151;
+
+  /* Accent - Pink */
+  --color-accent: #DF5C9A;
+  --color-accent-200: #FFB2D7;
+  --color-accent-300: #FF88C0;
+  --color-accent-500: #DF5C9A;
+  --color-accent-highlight: #e2a2be;
+
+  /* Primary - Cyan/Blue */
+  --color-primary-100: #D9F2FF;
+  --color-primary-200: #D0E9F5;
+  --color-primary-300: #ADCCDC;
+  --color-primary-400: #B8DFFF;
+  --color-primary-500: #75ABC7;
+  --color-primary-600: #58748B;
+  --color-primary-700: #4F6D85;
+  --color-primary-800: #4C6477;
+
+  /* Success - Green */
+  --color-success-100: #E5FFF3;
+  --color-success-400: #C2FFC8;
+  --color-success-600: #559D87;
+
+  /* Warning - Yellow */
+  --color-warning-100: #FFFBE5;
+  --color-warning-400: #FFDD87;
+  --color-warning-600: #9D8D55;
+
+  /* Danger - Red */
+  --color-danger-100: #FFE5E5;
+  --color-danger-400: #FF8787;
+  --color-danger-600: #9D5555;
+
+  /* Cards */
+  --color-cards-bg: #373737;
+  --color-cards-bg-load: #484848;
+  --color-correct: #83f1a7;
+  --color-incorrect: #e74c3c;
+
+  /* Typography */
+  --font-sen: 'Sen', sans-serif;
+  --font-jost: 'Jost', sans-serif;
+  --font-sans: 'Sen', sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+}
+
+/* Font utility classes */
+.font-sen {
+  font-family: 'Sen', sans-serif;
+}
+
+.font-jost {
+  font-family: 'Jost', sans-serif;
+}
+
+/* Custom drop shadows */
+.drop-shadow-title-card {
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.drop-shadow-logo {
+  filter: drop-shadow(0 0 10px rgba(223, 92, 154, 0.8));
+}
+
+.shadow-primary-chip {
+  box-shadow: 0 2px 8px rgba(79, 109, 133, 0.4);
+}