/* =========================================================================
   Fiscal Suite — Design Tokens (azul marino clasico profesional)
   Compartido por app-office, app-client y demas modulos via core-platform.
   Basado en rediseno Claude Design (ver fiscal-suite/project/tokens.jsx).
   ========================================================================= */

/* ---------- Tipografias ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* ---------- Navy scale ---------- */
    --fs-navy-950: #0b1d35;
    --fs-navy-900: #0f2847;
    --fs-navy-800: #153559;
    --fs-navy-700: #1b426b;  /* sidebar activo / botones primarios */
    --fs-navy-600: #24538a;
    --fs-navy-500: #2f6eb5;  /* hover / links */
    --fs-navy-400: #5b8fcc;
    --fs-navy-300: #9ebde0;
    --fs-navy-200: #cfdcef;
    --fs-navy-100: #e6edf6;
    --fs-navy-50:  #f3f6fb;

    /* ---------- Neutros calidos (no grises azulados) ---------- */
    --fs-ink-900: #11161d;
    --fs-ink-800: #1d242e;
    --fs-ink-700: #2d3744;
    --fs-ink-600: #4a5565;
    --fs-ink-500: #6b7683;
    --fs-ink-400: #8a94a0;
    --fs-ink-300: #b4bcc6;
    --fs-ink-200: #dae0e7;
    --fs-ink-100: #ebeff4;
    --fs-ink-50:  #f6f8fa;
    --fs-ink-0:   #ffffff;

    /* ---------- Semanticos (apagados, no saturados) ---------- */
    --fs-success:   #1f7a4d;
    --fs-success-bg: #e7f4ec;
    --fs-warning:   #a56a00;
    --fs-warning-bg: #fbf1dc;
    --fs-danger:    #b03030;
    --fs-danger-bg: #fbe9e9;
    --fs-info:      #1b426b;
    --fs-info-bg:   #e6edf6;

    /* ---------- Radii / shadows ---------- */
    --fs-r-xs: 4px;
    --fs-r-sm: 6px;
    --fs-r-md: 8px;
    --fs-r-lg: 12px;
    --fs-r-xl: 16px;
    --fs-shadow-xs: 0 1px 2px rgba(15, 40, 71, 0.05);
    --fs-shadow-sm: 0 1px 3px rgba(15, 40, 71, 0.08), 0 1px 2px rgba(15, 40, 71, 0.04);
    --fs-shadow-md: 0 4px 12px rgba(15, 40, 71, 0.06), 0 1px 3px rgba(15, 40, 71, 0.04);
    --fs-shadow-lg: 0 12px 32px rgba(15, 40, 71, 0.08), 0 4px 8px rgba(15, 40, 71, 0.04);

    /* ---------- Tipografia ---------- */
    --fs-font-sans:  'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --fs-font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
    --fs-font-mono:  'JetBrains Mono', 'SF Mono', Menlo, monospace;

    /* ---------- Compat: mapear tokens legacy (--fs-brand-*) al nuevo sistema ---------- */
    --fs-brand-primary:       var(--fs-navy-800);
    --fs-brand-primary-light: var(--fs-navy-500);
    --fs-brand-primary-dark:  var(--fs-navy-900);
    --fs-brand-accent:        var(--fs-navy-500);
    --fs-brand-gradient-start: var(--fs-navy-950);
    --fs-brand-gradient-end:   var(--fs-navy-700);

    /* =========================================================================
       Bootstrap / Metronic root var overrides.
       Metronic usa --bs-* y --kt-app-* para todos sus componentes. Al
       sobrescribirlas aqui (archivo cargado DESPUES de style.bundle.css)
       toda utilidad de Metronic usa nuestros tokens automaticamente.
       ========================================================================= */

    /* ---------- Bootstrap palette → design tokens ---------- */
    --bs-primary:            var(--fs-navy-800);
    --bs-primary-rgb:        21, 53, 89;
    --bs-primary-bg-subtle:  var(--fs-navy-50);
    --bs-primary-text-emphasis: var(--fs-navy-900);
    --bs-primary-border-subtle: var(--fs-navy-100);

    --bs-secondary:          var(--fs-ink-100);
    --bs-secondary-rgb:      235, 239, 244;

    --bs-success:            var(--fs-success);
    --bs-success-rgb:        31, 122, 77;
    --bs-success-bg-subtle:  var(--fs-success-bg);

    --bs-danger:             var(--fs-danger);
    --bs-danger-rgb:         176, 48, 48;
    --bs-danger-bg-subtle:   var(--fs-danger-bg);

    --bs-warning:            var(--fs-warning);
    --bs-warning-rgb:        165, 106, 0;
    --bs-warning-bg-subtle:  var(--fs-warning-bg);

    --bs-info:               var(--fs-info);
    --bs-info-rgb:           27, 66, 107;
    --bs-info-bg-subtle:     var(--fs-info-bg);

    --bs-light:              var(--fs-ink-50);
    --bs-dark:               var(--fs-ink-900);

    /* Grays → ink */
    --bs-gray:               var(--fs-ink-500);
    --bs-gray-dark:          var(--fs-ink-800);
    --bs-gray-100:           var(--fs-ink-50);
    --bs-gray-200:           var(--fs-ink-100);
    --bs-gray-300:           var(--fs-ink-200);
    --bs-gray-400:           var(--fs-ink-300);
    --bs-gray-500:           var(--fs-ink-400);
    --bs-gray-600:           var(--fs-ink-500);
    --bs-gray-700:           var(--fs-ink-600);
    --bs-gray-800:           var(--fs-ink-800);
    --bs-gray-900:           var(--fs-ink-900);

    /* Body + tipografia base */
    --bs-body-bg:            #ffffff;
    --bs-body-color:         var(--fs-ink-900);
    --bs-body-font-family:   var(--fs-font-sans);
    --bs-body-font-size:     13px;

    /* Headings heredan del parent (evita que el color navy dark de Metronic
       #071437 pinte h1/h2/h3 incluso sobre fondos navy/dark) */
    --bs-heading-color:      inherit;
    --bs-border-color:       var(--fs-ink-200);
    --bs-border-color-translucent: var(--fs-ink-100);
    --bs-border-radius:      var(--fs-r-sm);
    --bs-border-radius-sm:   var(--fs-r-xs);
    --bs-border-radius-lg:   var(--fs-r-md);
    --bs-border-radius-xl:   var(--fs-r-lg);

    /* ---------- Metronic app vars ---------- */
    --bs-app-bg-color:                          var(--fs-ink-50);
    --bs-app-header-base-bg-color:              transparent;
    --bs-app-header-base-border-bottom:         none;
    --bs-app-header-base-box-shadow:            none;
    --bs-app-sidebar-base-bg-color:             var(--fs-navy-900);
    --bs-app-sidebar-base-box-shadow:           none;
    --bs-app-sidebar-base-border-start:         none;
    --bs-app-sidebar-base-border-end:           1px solid rgba(255, 255, 255, 0.06);

    /* Primary Metronic colors */
    --bs-text-primary:       var(--fs-navy-800);
    --bs-link-color:         var(--fs-navy-600);
    --bs-link-hover-color:   var(--fs-navy-700);
}

/* ---------- Tipografia global ---------- */
body {
    font-family: var(--fs-font-sans);
    color: var(--fs-ink-900);
}

/* Titulos editoriales en serif */
h1, h2, h3, .fs-serif {
    font-family: var(--fs-font-serif);
    letter-spacing: -0.01em;
}

/* Utilidad: cifras / codigos / RFCs en mono */
.fs-mono {
    font-family: var(--fs-font-mono);
}

/* Eyebrow: texto pequeno en mayusculas para labels de seccion */
.fs-eyebrow {
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--fs-navy-600);
}