:root {
    /* Brand */
    --brand-name: "Fidus Backoffice";

    /* Typography */
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, system-emoji;
    --font-title: "Outfit", "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New";

    /* Font sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;

    /* Font weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    --brand-primary: #003883;
    --brand-primary-dark: #002A62;
    --brand-secondary: #FA5C13;
    --brand-blue-light: #588DEB;
    --brand-ink: #000000;
    --brand-muted: #5F6672;
    --brand-surface: #F2F4F7;
    --brand-gray-light: #F2F4F7;
    --brand-beige: #F2F3EE;
    --brand-border: #D5D9E0;
    --brand-gradient-to: #FF8A45;
    --brand-dashboard-navy: #0B2C63;
    --brand-focus-ring: rgba(250, 92, 19, 0.14);

    --brand-success: #00A63E;
    --brand-danger: #E7000B;
    --brand-danger-light: #FEF2F2;
    --brand-white: #FFFFFF;
    --brand-tertiary: #CCA700;
    --brand-icon-green-bg: #DCFCE7;
    --brand-icon-green: #16A34A;
    --brand-icon-blue-bg: #E7EFFD;
    /* Valores que la app (sofinco_app) usa en sus vistas y el backoffice copia
       para verse igual: tarjetas, iconos, acentos del dashboard y sidebar. */
    --app-card-border: #E7EBF2;
    --app-card-label: #6B7280;
    --app-card-ink: #111827;
    --app-card-hint: #9CA3AF;
    --app-card-divider: #EEF1F6;
    --app-card-shadow: 0 2px 8px rgba(17, 24, 39, 0.06);
    --app-card-shadow-hover: 0 8px 18px rgba(17, 24, 39, 0.08);
    --app-table-shadow: 0 1px 3px rgba(0, 56, 131, 0.08);
    --app-login-shadow: 0 10px 30px rgba(0, 56, 131, 0.08);
    --app-link-blue: #1F5CB8;
    --app-icon-blue: #2996FF;
    --app-icon-soft: #EEF3FF;
    --app-accent-blue: #2563EB;
    --app-accent-orange: #F58220;
    --app-accent-amber: #F5A623;
    --app-amber-soft: #FFF6E5;
    --app-hero-text: #DCE8FF;
    --app-sidebar-hover: rgba(255, 136, 0, 0.4);
    --app-sidebar-role-icon: #A9C5F4;
    --app-online: #22C55E;
    --app-summary-border: #EAECF0;
    --app-summary-icon-bg: #E7EEFB;
    --app-badge-success-text: #008236;
    --app-badge-warning-bg: #FEF9C3;
    --app-badge-warning-text: #CA8A04;
    --app-badge-danger-bg: #FEE2E2;
    --app-badge-danger-text: #DC2626;
    --app-accounts-icon-bg: #EAF5FF;
    --app-tone-warning: #FFA500;
    --app-tone-muted: #7890A8;
    --app-tone-success-bg: #EAF9EF;
    --app-tone-warning-bg: #FFF5E5;
    --app-tone-danger-bg: #FFF0F2;
    /* Inversiones > Tabla de Tasas (InvestmentRateMatrixTable.vue). */
    --app-rate-navy: #0B3C5D;
    --app-rate-navy-shadow: rgba(11, 60, 93, 0.2);
    --app-rate-navy-focus: rgba(11, 60, 93, 0.12);
    --app-slate-50: #F8FAFC;
    --app-slate-100: #F1F5F9;
    --app-slate-200: #E2E8F0;
    --app-slate-300: #CBD5E1;
    --app-slate-400: #94A3B8;
    --app-slate-500: #64748B;
    --app-slate-600: #475569;
    --app-slate-700: #334155;
    --app-slate-800: #1E293B;
    --app-slate-900: #0F172A;
    --app-gray-100: #F3F4F6;
    --app-gray-200: #E5E7EB;
    --app-gray-700: #374151;
    --app-rate-row-even: #EBF8F5;
    --app-rate-row-odd: #F4FBF9;
    --app-rate-row-hover: #E2F4EF;
    --app-alert-success-bg: #ECFDF5;
    --app-alert-success-text: #065F46;
    --app-alert-success-border: #A7F3D0;
    --app-alert-error-text: #991B1B;
    --app-alert-error-border: #FECACA;
    --app-status-dirty: #D97706;
    --app-status-clean: #059669;
    /* Configuración (ConfigurationsView.vue). */
    --app-config-schedule-bg: #F8F9FA;
    --app-config-field-label: #344054;
    --app-config-disabled-text: #8A92A6;
    --app-config-summary-bg: #F0F6FE;
    --app-config-summary-border: #C4DCFA;
    --app-config-error-bg: #FEF3F2;
    --app-config-error-border: #FECDCA;
    --app-config-error-text: #B42318;
    --app-pending-bg: #FEFCE8;
    --app-pending-border: #FEF08A;
    --app-pending-text: #854D0E;
    /* Los botones de la app no heredan la fuente: el navegador pinta Arial. */
    --font-button: Arial, "Liberation Sans", Helvetica, sans-serif;

    --color-primary: var(--brand-primary);
    --color-primary-hover: var(--brand-primary-dark);
    --color-link-hover: var(--brand-secondary);
    --color-secondary: var(--brand-secondary);
    --color-background: var(--brand-gray-light);
    --color-surface: var(--brand-white);
    --color-text: var(--brand-ink);
    --color-text-muted: var(--brand-muted);
    --color-border: var(--brand-border);
    --color-focus: var(--brand-secondary);
    --shadow-focus: 0 0 0 3px var(--brand-focus-ring);

    --brand-heading: var(--brand-ink);
    --brand-sidebar-accent: var(--brand-gradient-to);
    --brand-gradient-sidebar: linear-gradient(145deg, color-mix(in srgb, var(--brand-dashboard-navy) 55%, var(--brand-primary-dark)) 0%, var(--brand-primary-dark) 42%, var(--brand-primary) 72%, var(--brand-blue-light) 100%);
    --brand-gradient-primary: linear-gradient(90deg, var(--brand-blue-light) 0%, var(--brand-primary) 100%);
    --brand-gradient-button: linear-gradient(90deg, var(--brand-blue-light) 0%, var(--brand-primary) 50%, var(--brand-primary) 100%);
    --brand-gradient-hero: linear-gradient(135deg, var(--brand-dashboard-navy) 0%, var(--brand-primary) 100%);
    --brand-gradient-soft: linear-gradient(160deg, var(--brand-primary) 0%, var(--brand-blue-light) 100%);
    --brand-gradient-accent: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-gradient-to) 100%);

    /* Status colors */
    --color-success: var(--brand-success);
    --color-error: var(--brand-danger);
    --color-error-light: var(--brand-danger-light);
    --color-warning: var(--brand-tertiary);
    --color-info: var(--brand-blue-light);
    --color-green: var(--brand-success);

    /* Basics */
    --color-white: #fff;
    --color-black: #000;
    --color-transparent: transparent;

    /* Spacing */
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-2-5: 0.625rem;
    --space-3: 0.75rem;
    --space-3-5: 0.875rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-11: 2.75rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Border radii */
    --radius-none: 0;
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;

    /* Transitions */
    --duration-default: 0.15s;
    --ease-default: cubic-bezier(.4, 0, .2, 1);

    /* Blurs */
    --blur-sm: 4px;
    --blur: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;

    /* Shadows */
    --color-shadow: #0B1B33;
    --color-backdrop: color-mix(in srgb, var(--color-shadow) 45%, transparent);
    --color-highlight: color-mix(in srgb, var(--color-green) 15%, transparent);
    --shadow-card: 0 1px 2px color-mix(in srgb, var(--color-shadow) 4%, transparent), 0 4px 16px color-mix(in srgb, var(--color-shadow) 4%, transparent);
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}