/* ============================================================
   YUJIN CRM — Design Tokens
   友人 · Precisión japonesa al servicio de la relación humana
   ============================================================
   Uso: importar como primer archivo CSS del proyecto.
   Todas las variables aquí definidas son la fuente de verdad
   del sistema visual. Ningún valor de color, tipografía o
   espaciado debe hardcodearse fuera de este archivo.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     MARCA
     ---------------------------------------------------------- */
  --yujin-name: "Yujin";
  --yujin-kanji: "友人";


  /* ----------------------------------------------------------
     COLORES — Paleta base
     ---------------------------------------------------------- */

  /* Índigo (acento primario — acción, foco, identidad) */
  --color-indigo-50:  #ECEFFE;
  --color-indigo-100: #C8CDFA;
  --color-indigo-200: #A0A8F5;
  --color-indigo-400: #5A66E8;
  --color-indigo-600: #2D3A8C;   /* ← color principal de marca */
  --color-indigo-800: #1A2260;
  --color-indigo-900: #0D1235;

  /* Teal (acento secundario — éxito, activo, positivo) */
  --color-teal-50:  #E2F5F3;
  --color-teal-100: #AADFD9;
  --color-teal-200: #6EC8C0;
  --color-teal-400: #1D9E94;
  --color-teal-600: #0F6E66;
  --color-teal-800: #074F49;
  --color-teal-900: #03302C;

  /* Ámbar (alertas, pendiente, atención) */
  --color-amber-50:  #FDF4E3;
  --color-amber-100: #FAE0A8;
  --color-amber-200: #F5C86A;
  --color-amber-400: #D4950A;
  --color-amber-600: #9B6A05;
  --color-amber-800: #6B4803;
  --color-amber-900: #3D2801;

  /* Coral (peligro, pérdida, error) */
  --color-coral-50:  #FCEEE9;
  --color-coral-100: #F7C9BB;
  --color-coral-200: #F09F8A;
  --color-coral-400: #D45840;
  --color-coral-600: #943020;
  --color-coral-800: #6A1F13;
  --color-coral-900: #3D0E08;

  /* Neutros cálidos (base de la UI — espíritu wabi-sabi) */
  --color-warm-0:   #FFFFFF;
  --color-warm-50:  #F8F7F4;   /* fondo de página */
  --color-warm-100: #F2F0EC;   /* fondo de superficie */
  --color-warm-150: #EAE8E2;   /* bordes sutiles */
  --color-warm-200: #DEDAD2;   /* bordes normales */
  --color-warm-300: #C8C5BB;   /* bordes énfasis */
  --color-warm-400: #A8A49A;   /* texto deshabilitado */
  --color-warm-500: #888480;   /* texto terciario / placeholders */
  --color-warm-600: #615E58;   /* texto secundario */
  --color-warm-700: #3E3B36;   /* texto primario suave */
  --color-warm-800: #2C2927;   /* texto primario */
  --color-warm-900: #1A1815;   /* texto máxima jerarquía */

  /* Ink (el color más oscuro — titulares, énfasis máximo) */
  --color-ink: #1A1815;


  /* ----------------------------------------------------------
     COLORES — Semánticos (roles funcionales en la UI)
     ---------------------------------------------------------- */

  --color-bg-page:        var(--color-warm-50);
  --color-bg-surface:     var(--color-warm-0);
  --color-bg-subtle:      var(--color-warm-100);
  --color-bg-muted:       var(--color-warm-150);

  --color-border-subtle:  var(--color-warm-150);
  --color-border-default: var(--color-warm-200);
  --color-border-strong:  var(--color-warm-300);

  --color-text-primary:   var(--color-warm-800);
  --color-text-secondary: var(--color-warm-600);
  --color-text-tertiary:  var(--color-warm-500);
  --color-text-disabled:  var(--color-warm-400);
  --color-text-inverse:   var(--color-warm-0);

  --color-accent:         var(--color-indigo-600);
  --color-accent-hover:   var(--color-indigo-800);
  --color-accent-light:   var(--color-indigo-50);
  --color-accent-text:    var(--color-indigo-600);

  --color-success:        var(--color-teal-600);
  --color-success-light:  var(--color-teal-50);
  --color-success-text:   var(--color-teal-800);

  --color-warning:        var(--color-amber-600);
  --color-warning-light:  var(--color-amber-50);
  --color-warning-text:   var(--color-amber-800);

  --color-danger:         var(--color-coral-600);
  --color-danger-light:   var(--color-coral-50);
  --color-danger-text:    var(--color-coral-800);


  /* ----------------------------------------------------------
     COLORES — Módulos / Entidades (iconos y tarjetas del sistema)
     Cada módulo tiene un color semántico que lo identifica.
     Usar siempre: bg = *-50, border = *-200, icon = *-600, text = *-800
     ---------------------------------------------------------- */

  /* Contactos */
  --module-contacts-bg:     var(--color-indigo-50);
  --module-contacts-border: var(--color-indigo-200);
  --module-contacts-icon:   var(--color-indigo-600);
  --module-contacts-text:   var(--color-indigo-800);

  /* Empresas */
  --module-companies-bg:    #EEF2FF;
  --module-companies-icon:  #3730A3;

  /* Proveedores */
  --module-suppliers-bg:    var(--color-amber-50);
  --module-suppliers-icon:  var(--color-amber-600);

  /* Asesores */
  --module-advisors-bg:     var(--color-teal-50);
  --module-advisors-icon:   var(--color-teal-600);

  /* Inventario */
  --module-inventory-bg:    #FFF7ED;
  --module-inventory-icon:  #C2610C;

  /* Documentos */
  --module-docs-bg:         var(--color-warm-100);
  --module-docs-icon:       var(--color-warm-600);

  /* Pipeline Runs / Deals */
  --module-pipeline-bg:     var(--color-indigo-50);
  --module-pipeline-icon:   var(--color-indigo-600);

  /* Tickets Soporte */
  --module-tickets-bg:      var(--color-coral-50);
  --module-tickets-icon:    var(--color-coral-600);

  /* Pagos */
  --module-payments-bg:     var(--color-teal-50);
  --module-payments-icon:   var(--color-teal-600);

  /* Firmas Digitales */
  --module-signatures-bg:   #F0FDF4;
  --module-signatures-icon: #15803D;

  /* Tarifas Horarias */
  --module-rates-bg:        var(--color-amber-50);
  --module-rates-icon:      var(--color-amber-600);

  /* Usuarios */
  --module-users-bg:        var(--color-indigo-50);
  --module-users-icon:      var(--color-indigo-600);

  /* Asistentes IA */
  --module-ai-bg:           #F5F3FF;
  --module-ai-icon:         #6D28D9;

  /* Tareas */
  --module-tasks-bg:        var(--color-warm-100);
  --module-tasks-icon:      var(--color-warm-700);

  /* Estadísticas */
  --module-stats-bg:        var(--color-indigo-50);
  --module-stats-icon:      var(--color-indigo-600);

  /* KPIs */
  --module-kpis-bg:         var(--color-amber-50);
  --module-kpis-icon:       var(--color-amber-600);

  /* Configuración / Sistema */
  --module-system-bg:       var(--color-warm-100);
  --module-system-icon:     var(--color-warm-600);

  /* Seguridad */
  --module-security-bg:     var(--color-coral-50);
  --module-security-icon:   var(--color-coral-600);

  /* Tenants SaaS */
  --module-tenants-bg:      var(--color-teal-50);
  --module-tenants-icon:    var(--color-teal-600);

  /* Entidades Custom */
  --module-custom-bg:       #FDF4FF;
  --module-custom-icon:     #9333EA;

  /* Integraciones */
  --module-integrations-bg: var(--color-indigo-50);
  --module-integrations-icon: var(--color-indigo-600);


  /* ----------------------------------------------------------
     COLORES — Estados de Pipeline / Deal
     ---------------------------------------------------------- */

  --stage-lead:        #6366F1;   /* índigo suave */
  --stage-discovery:   #8B5CF6;   /* violeta */
  --stage-quote:       var(--color-amber-400);
  --stage-contract:    var(--color-teal-400);
  --stage-won:         #16A34A;   /* verde éxito */
  --stage-lost:        var(--color-coral-400);

  --stage-lead-bg:     #EEF2FF;
  --stage-discovery-bg:#F5F3FF;
  --stage-quote-bg:    var(--color-amber-50);
  --stage-contract-bg: var(--color-teal-50);
  --stage-won-bg:      #F0FDF4;
  --stage-lost-bg:     var(--color-coral-50);


  /* ----------------------------------------------------------
     TIPOGRAFÍA
     ---------------------------------------------------------- */

  /* Familias */
  --font-sans:    "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", monospace;

  /* Escala */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;

  /* Pesos — SOLO estos dos */
  --font-regular: 400;
  --font-medium:  500;

  /* Interlineado */
  --leading-tight:  1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* Tracking */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;


  /* ----------------------------------------------------------
     ESPACIADO — Escala 4px base
     ---------------------------------------------------------- */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;


  /* ----------------------------------------------------------
     BORDES
     ---------------------------------------------------------- */

  --border-width-thin:    0.5px;
  --border-width-default: 1px;
  --border-width-thick:   2px;   /* solo para cards destacadas / seleccionadas */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;   /* pills, badges */


  /* ----------------------------------------------------------
     SOMBRAS — Solo funcionales, nunca decorativas
     ---------------------------------------------------------- */

  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(26, 24, 21, 0.05);
  --shadow-md:   0 2px 8px rgba(26, 24, 21, 0.08);   /* modales, dropdowns */
  --shadow-focus: 0 0 0 3px rgba(45, 58, 140, 0.15); /* ring de foco */


  /* ----------------------------------------------------------
     TRANSICIONES — Rápidas y funcionales
     ---------------------------------------------------------- */

  --transition-fast:   100ms ease-out;
  --transition-base:   150ms ease-out;
  --transition-slow:   200ms ease-out;


  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */

  --sidebar-width:        220px;
  --sidebar-width-collapsed: 56px;
  --topbar-height:        52px;
  --content-max-width:    1200px;
  --content-padding:      var(--space-6);


  /* ----------------------------------------------------------
     ICONOGRAFÍA — Sistema Lucide (stroke 1.5px, 20px base)
     ---------------------------------------------------------- */

  --icon-size-sm:     16px;
  --icon-size-base:   20px;
  --icon-size-lg:     24px;
  --icon-stroke:      1.5;     /* stroke-width de Lucide */
  --icon-stroke-bold: 2;       /* para estados activos o énfasis */

  /* Tamaño de ícono en tarjetas de módulo */
  --module-card-icon-size:      28px;
  --module-card-icon-bg-size:   52px;   /* contenedor del ícono */
  --module-card-icon-radius:    var(--radius-md);

  /* ----------------------------------------------------------
     KANJI WATERMARK — Opción A
     Marca de agua decorativa en esquina superior derecha
     de cada tarjeta de módulo. Acompaña al ícono Lucide,
     nunca lo reemplaza.
     ---------------------------------------------------------- */

  --kanji-font:     "Noto Serif JP", "Yu Mincho", "游明朝", serif;
  --kanji-size-lg:  72px;   /* tarjetas estándar (180px wide) */
  --kanji-size-md:  56px;   /* tarjetas compactas */
  --kanji-size-sm:  40px;   /* tarjetas muy pequeñas */
  --kanji-opacity:  0.06;   /* decorativo puro — nunca superar 0.10 */
  --kanji-weight:   700;


  /* ----------------------------------------------------------
     TARJETAS DEL SISTEMA (Centro de Control / Entidades)
     ---------------------------------------------------------- */

  --card-module-width:       180px;
  --card-module-min-height:  140px;
  --card-module-padding:     var(--space-5);
  --card-module-radius:      var(--radius-lg);
  --card-module-border:      var(--border-width-thin) solid var(--color-border-subtle);
  --card-module-bg:          var(--color-bg-surface);
  --card-module-bg-hover:    var(--color-warm-50);

  /* Tarjeta de métricas / KPI */
  --card-metric-padding:     var(--space-4) var(--space-5);
  --card-metric-radius:      var(--radius-md);
  --card-metric-bg:          var(--color-bg-subtle);

  /* Tarjeta de entidad (deal, contacto) */
  --card-entity-padding:     var(--space-4);
  --card-entity-radius:      var(--radius-lg);
  --card-entity-border:      var(--border-width-thin) solid var(--color-border-subtle);
  --card-entity-bg:          var(--color-bg-surface);


  /* ----------------------------------------------------------
     SIDEBAR
     ---------------------------------------------------------- */

  --sidebar-bg:              var(--color-bg-surface);
  --sidebar-border:          var(--border-width-thin) solid var(--color-border-subtle);
  --sidebar-item-height:     36px;
  --sidebar-item-radius:     var(--radius-md);
  --sidebar-item-active-bg:  var(--color-accent-light);
  --sidebar-item-active-text: var(--color-accent);
  --sidebar-section-label-size: var(--text-xs);
  --sidebar-section-label-tracking: var(--tracking-wider);


  /* ----------------------------------------------------------
     BADGES / PILLS
     ---------------------------------------------------------- */

  --badge-padding:    2px 8px;
  --badge-radius:     var(--radius-full);
  --badge-font-size:  var(--text-xs);
  --badge-font-weight: var(--font-medium);


  /* ----------------------------------------------------------
     FORMULARIOS
     ---------------------------------------------------------- */

  --input-height:      36px;
  --input-padding:     0 var(--space-3);
  --input-radius:      var(--radius-md);
  --input-border:      var(--border-width-default) solid var(--color-border-default);
  --input-bg:          var(--color-bg-surface);
  --input-focus-border: var(--color-accent);
  --input-focus-ring:  var(--shadow-focus);
  --input-font-size:   var(--text-base);


  /* ----------------------------------------------------------
     BOTONES
     ---------------------------------------------------------- */

  --btn-height:         36px;
  --btn-padding:        0 var(--space-4);
  --btn-radius:         var(--radius-md);
  --btn-font-size:      var(--text-base);
  --btn-font-weight:    var(--font-medium);
  --btn-transition:     var(--transition-base);

  /* Primario */
  --btn-primary-bg:     var(--color-accent);
  --btn-primary-text:   var(--color-text-inverse);
  --btn-primary-hover:  var(--color-accent-hover);

  /* Secundario */
  --btn-secondary-bg:   transparent;
  --btn-secondary-text: var(--color-accent);
  --btn-secondary-border: var(--color-accent);
  --btn-secondary-hover-bg: var(--color-accent-light);

  /* Ghost */
  --btn-ghost-bg:       transparent;
  --btn-ghost-text:     var(--color-text-secondary);
  --btn-ghost-border:   var(--color-border-default);
  --btn-ghost-hover-bg: var(--color-bg-subtle);

  /* Peligro */
  --btn-danger-bg:      var(--color-danger);
  --btn-danger-text:    var(--color-text-inverse);
  --btn-danger-hover:   var(--color-coral-800);


  /* ----------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------- */

  --z-base:     0;
  --z-above:    1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-tooltip:  500;

}


/* ----------------------------------------------------------
   DARK MODE
   Si en el futuro se implementa modo oscuro, sobrescribir
   aquí las variables semánticas únicamente. Los tokens
   primitivos (--color-indigo-*, etc.) no cambian.
   ---------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    /* Descomentar y ajustar si se activa dark mode */

    /* --color-bg-page:        #0F0E0C; */
    /* --color-bg-surface:     #1A1916; */
    /* --color-bg-subtle:      #232119; */
    /* --color-bg-muted:       #2C2A26; */

    /* --color-border-subtle:  rgba(255,255,255,0.07); */
    /* --color-border-default: rgba(255,255,255,0.12); */
    /* --color-border-strong:  rgba(255,255,255,0.20); */

    /* --color-text-primary:   #E8E6E1; */
    /* --color-text-secondary: #A8A49A; */
    /* --color-text-tertiary:  #6E6A63; */
  }
}


/* ----------------------------------------------------------
   RESET MÍNIMO — Asegurar que los tokens apliquen base
   ---------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
}