/* ================================================================
   MANAM Design System v2.0 — Tokens canónicos
   Fuente única de verdad para todos los valores de diseño.

   USO:
     @import url('mn-tokens.css');  ← en style.css y admin.css
     background: var(--mn-gold-500);

   FASES:
     A (actual)  → solo tokens, no se usan en reglas CSS todavía
     B           → componentes migran a --mn-* (reemplaza --adm-*)
     C           → pantallas completas
     D           → polish, A11y audit
   ================================================================ */

:root {

    /* ────────────────────────────────────────────────
       COLORES — NAVY (sidebar, topbar admin)
       ──────────────────────────────────────────────── */
    --mn-navy-900: #050D18;
    --mn-navy-800: #091422; /* base sidebar */
    --mn-navy-700: #0F1B2D;
    --mn-navy-600: #162236;
    --mn-navy-500: #1E3048;
    --mn-navy-soft: #111f30; /* nav hover */

    /* ────────────────────────────────────────────────
       COLORES — DORADO (brand accent primary)
       ──────────────────────────────────────────────── */
    --mn-gold-50:  #FDF8EF;
    --mn-gold-300: #E4BF82;
    --mn-gold-400: #D4A855;
    --mn-gold-500: #C9963B; /* ACENTO PRINCIPAL */
    --mn-gold-600: #B07D29;
    --mn-gold-subtle: rgba(201, 150, 59, 0.10);

    /* ────────────────────────────────────────────────
       COLORES — TEXTO
       ──────────────────────────────────────────────── */
    --mn-ink:           #0B1320; /* cuerpo principal */
    --mn-ink-secondary: #4A5568; /* texto secundario */
    --mn-ink-tertiary:  #9CA3AF; /* labels, placeholders */

    /* ────────────────────────────────────────────────
       COLORES — SUPERFICIES
       ──────────────────────────────────────────────── */
    --mn-white:        #FFFFFF;
    --mn-canvas:       #F8F6F2; /* fondo cliente (cálido) */
    --mn-canvas-soft:  #FCFAF7;
    --mn-canvas-admin: #F4F7FA; /* fondo admin (frío) */
    --mn-surface:      #FFFFFF; /* cards, modales */
    --mn-surface-alt:  #F8FAFB; /* filas alternas, secondary panels */

    /* Bordes */
    --mn-border: #E5E7EB;

    /* ────────────────────────────────────────────────
       COLORES — SEMÁNTICOS
       Los valores *-500 son el TARGET unificado (FASE C).
       Los valores *-600 son los actuales del admin (sin cambio visual).
       ──────────────────────────────────────────────── */

    /* Éxito */
    --mn-success-50:  #F0FDF4;
    --mn-success-200: #BBF7D0;
    --mn-success-500: #22C55E; /* target FASE C (cliente usará este) */
    --mn-success-600: #16A34A; /* admin actual (badges, texto) */
    --mn-success-700: #15803D;

    /* Peligro */
    --mn-danger-50:  #FEF2F2;
    --mn-danger-200: #FECACA;
    --mn-danger-500: #EF4444; /* target FASE C */
    --mn-danger-600: #DC2626; /* admin actual */
    --mn-danger-700: #B91C1C;

    /* Advertencia */
    --mn-warning-50:  #FFFBEB;
    --mn-warning-200: #FDE68A;
    --mn-warning-500: #F59E0B; /* target FASE C */
    --mn-warning-600: #D97706; /* admin actual */
    --mn-warning-700: #B45309;

    /* Info */
    --mn-info-50:  #EFF6FF;
    --mn-info-200: #BFDBFE;
    --mn-info-500: #3B82F6; /* target FASE C */
    --mn-info-600: #2563EB; /* admin actual */
    --mn-info-700: #1D4ED8;

    /* ────────────────────────────────────────────────
       TIPOGRAFÍA — Familias
       ──────────────────────────────────────────────── */
    --mn-font-display: 'Plus Jakarta Sans', sans-serif;
    --mn-font-body:    'Inter', sans-serif;
    --mn-font-mono:    'JetBrains Mono', monospace;

    /* ────────────────────────────────────────────────
       TIPOGRAFÍA — Escala de tamaños
       ──────────────────────────────────────────────── */
    --mn-fs-2xs:  10px;
    --mn-fs-xs:   11px;
    --mn-fs-sm:   12px;
    --mn-fs-md:   13px;
    --mn-fs-base: 14px;
    --mn-fs-lg:   15px;
    --mn-fs-xl:   17px;
    --mn-fs-2xl:  20px;
    --mn-fs-3xl:  24px;
    --mn-fs-4xl:  30px;

    /* ────────────────────────────────────────────────
       TIPOGRAFÍA — Pesos
       ──────────────────────────────────────────────── */
    --mn-fw-regular:   400;
    --mn-fw-medium:    500;
    --mn-fw-semibold:  600;
    --mn-fw-bold:      700;
    --mn-fw-extrabold: 800;

    /* ────────────────────────────────────────────────
       ESPACIADO — Escala de 4px
       ──────────────────────────────────────────────── */
    --mn-sp-1:  4px;
    --mn-sp-2:  8px;
    --mn-sp-3:  12px;
    --mn-sp-4:  16px;
    --mn-sp-5:  20px;
    --mn-sp-6:  24px;
    --mn-sp-8:  32px;
    --mn-sp-10: 40px;
    --mn-sp-12: 48px;
    --mn-sp-16: 64px;

    /* ────────────────────────────────────────────────
       BORDER RADIUS
       Nota: --mn-r-lg está en 10px (valor actual del admin).
       Se actualizará a 12px en FASE C junto con el rediseño
       de componentes.
       ──────────────────────────────────────────────── */
    --mn-r-sm:   6px;
    --mn-r-md:   8px;
    --mn-r-lg:   10px;
    --mn-r-xl:   12px;
    --mn-r-2xl:  16px;
    --mn-r-3xl:  20px;
    --mn-r-full: 9999px;

    /* ────────────────────────────────────────────────
       SOMBRAS
       ──────────────────────────────────────────────── */
    --mn-sh-xs: 0 1px 2px rgba(9, 20, 34, 0.06);
    --mn-sh-sm: 0 2px 6px rgba(9, 20, 34, 0.07), 0 1px 2px rgba(9, 20, 34, 0.04);
    --mn-sh-md: 0 4px 14px rgba(9, 20, 34, 0.09), 0 2px 4px rgba(9, 20, 34, 0.04);
    --mn-sh-lg: 0 8px 28px rgba(9, 20, 34, 0.10), 0 4px 8px rgba(9, 20, 34, 0.05);
    --mn-sh-xl: 0 16px 44px rgba(9, 20, 34, 0.12), 0 6px 12px rgba(9, 20, 34, 0.05);

    /* ────────────────────────────────────────────────
       Z-INDEX — Escala de capas
       ──────────────────────────────────────────────── */
    --mn-z-base:     0;
    --mn-z-above:    1;
    --mn-z-dropdown: 20;
    --mn-z-sticky:   30;
    --mn-z-sidebar:  40;
    --mn-z-topbar:   50;
    --mn-z-modal:    60;
    --mn-z-toast:    80;
    --mn-z-tooltip:  90;
    --mn-z-overlay:  100;

    /* ────────────────────────────────────────────────
       TRANSICIONES
       ──────────────────────────────────────────────── */
    --mn-ease-soft:  cubic-bezier(.22, 1, .36, 1);
    --mn-ease-in:    cubic-bezier(.4, 0, 1, 1);
    --mn-ease-out:   cubic-bezier(0, 0, .2, 1);
    --mn-ease-inout: cubic-bezier(.4, 0, .2, 1);

    --mn-duration-fast:  100ms;
    --mn-duration-base:  150ms;
    --mn-duration-slow:  250ms;
    --mn-duration-xslow: 400ms;

    --mn-transition-fast: all var(--mn-duration-fast) var(--mn-ease-out);
    --mn-transition-base: all var(--mn-duration-base) var(--mn-ease-out);
    --mn-transition-slow: all var(--mn-duration-slow) var(--mn-ease-out);

    /* ────────────────────────────────────────────────
       FOCUS RING — Para accesibilidad (WCAG 2.4.11)
       Aplicar en FASE B a todos los :focus-visible
       ──────────────────────────────────────────────── */
    --mn-focus-ring-color: rgba(201, 150, 59, 0.40);
    --mn-focus-ring-width: 3px;
    --mn-focus-ring:       0 0 0 var(--mn-focus-ring-width) var(--mn-focus-ring-color);
}