:root {
    /* Base design tokens.
       Estas variables seran administradas luego por el panel de Apariencia. */
    --font-family-base: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

    --color-primary: #4a5899;
    --color-primary-hover: #3b467b;
    --color-secondary: #da44a0;
    --color-secondary-hover: #be2d84;
    --color-accent: #559cad;

    --color-button-primary: var(--color-primary);
    --color-button-primary-hover: var(--color-primary-hover);
    --color-button-secondary: var(--color-secondary);
    --color-button-secondary-hover: var(--color-secondary-hover);
    --color-button-outline-bg: #ffffff;
    --color-button-outline-border: rgba(74, 88, 153, 0.28);
    --color-button-outline-hover-bg: rgba(74, 88, 153, 0.08);

    --color-title: #4a5899;
    --color-text: #2f2440;
    --color-text-secondary: #736278;
    --color-text-muted: #8b82a0;

    --color-bg: #f8eff6;
    --color-bg-strong: #fcf5fa;
    --color-surface: #f3dde9;
    --color-surface-soft: #fcf7fb;
    --color-card: #ffffff;
    --color-card-soft: rgba(255, 255, 255, 0.88);
    --color-border: rgba(85, 156, 173, 0.24);
    --color-border-strong: rgba(85, 156, 173, 0.35);
    --color-topbar-bg: #ffffff;
    --color-topbar-border: rgba(85, 156, 173, 0.18);
    --color-sidebar-link-hover-bg: rgba(85, 156, 173, 0.12);
    --color-sidebar-active-bg: var(--color-secondary);
    --color-sidebar-active-text: #ffffff;
    --color-sidebar-card-bg: #ffffff;
    --color-sidebar-card-border: rgba(0, 0, 0, 0.08);
    --color-mobile-nav-bg: rgba(255, 255, 255, 0.92);
    --color-mobile-nav-text: var(--color-primary);
    --color-mobile-nav-active-bg: var(--color-surface);
    --color-mobile-nav-active-text: var(--color-secondary);
    --color-mobile-sheet-bg: rgba(255, 255, 255, 0.96);
    --color-mobile-sheet-border: rgba(0, 0, 0, 0.08);
    --color-notification-badge-bg: var(--color-secondary);
    --color-notification-badge-text: #ffffff;
    --color-focus-ring: rgba(74, 88, 153, 0.14);
    --color-sticky-topbar-mask: #fbf5fa;

    --state-success: #d6f0df;
    --state-warning: #fff0c9;
    --state-danger: #f8d7e4;
    --state-info: #d8edf2;

    --radius-sm: 14px;
    --radius-md: 18px;
    --radius-lg: 22px;
    --radius-xl: 24px;

    --shadow-soft: 0 12px 24px rgba(74, 88, 153, 0.08);
    --shadow-card: 0 18px 34px rgba(74, 88, 153, 0.12);
    --shadow-button: 0 14px 26px rgba(74, 88, 153, 0.2);
    --shadow-button-secondary: 0 14px 26px rgba(218, 68, 160, 0.22);
    --shadow-button-primary-strong: 0 10px 24px rgba(74, 88, 153, 0.18);
    --shadow-button-primary-hover: 0 14px 28px rgba(74, 88, 153, 0.22);
    --shadow-button-primary-active: 0 8px 18px rgba(74, 88, 153, 0.16);

    --card-surface: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.88) 0%,
        rgba(252, 247, 251, 0.96) 100%
    );
    --app-background: radial-gradient(circle at top right, rgba(218, 68, 160, 0.14), transparent 24%),
        linear-gradient(180deg, var(--color-bg-strong) 0%, var(--color-bg) 100%);

    /* Metodos de pago fijos por requerimiento funcional. */
    --payment-cash: #15803d;
    --payment-yape: #7c3aed;
    --payment-plin: #0f9aa8;
    --payment-card: #4b5563;

    /* Alias de compatibilidad con la base actual. */
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-hover);
    --secondary: var(--color-secondary);
    --secondary-dark: var(--color-secondary-hover);
    --accent: var(--color-accent);
    --background: var(--color-bg);
    --surface: var(--color-surface);
    --surface-soft: var(--color-surface-soft);
    --panel-surface: var(--card-surface);
    --surface-strong: var(--color-surface);
    --text: var(--color-text);
    --muted: var(--color-text-secondary);
    --line: var(--color-border);
    --border: var(--color-border-strong);
    --card: var(--color-card);
    --bg: var(--color-bg);
    --white: #ffffff;
    --success: var(--state-success);
    --warning: var(--state-warning);
    --danger: var(--state-danger);
    --info: var(--state-info);
    --shadow: var(--shadow-card);
    --radius: var(--radius-lg);
}