/* ============================================================
   Crece Hub — Design Tokens (fuente única de verdad)
   Importar en TODOS los módulos antes de cualquier otro CSS:
   <link rel="stylesheet" href="../shared/tokens.css">
   ============================================================ */

/* Geist se carga como <link> en app/index.html — más rápido que @import */

:root {

  /* --- Colores de superficie -------------------------------- */
  --ui-bg:        #EFF2F7;   /* fondo base de la app */
  --ui-surface:   #FFFFFF;   /* tarjetas y paneles */
  --ui-surface2:  #F4F6FA;   /* inputs, fondos secundarios */
  --ui-surface3:  #E8EDF4;   /* hover states, chips */

  /* --- Bordes --------------------------------------------- */
  --ui-border:    #DDE3EC;
  --ui-border2:   #BEC9D8;

  /* --- Texto ---------------------------------------------- */
  --ui-text-1:    #14202E;   /* headings, valores principales */
  --ui-text-2:    #485566;   /* labels, descripción */
  --ui-text-3:    #8898AB;   /* placeholders, meta info */
  --ui-text-4:    #B4C0CF;   /* texto muy tenue, decorativo */

  /* --- Acento (azul primario) ------------------------------ */
  --ui-accent:    #3D6BE8;
  --ui-accent-bg: #EEF2FD;
  --ui-accent-t:  #2549B0;

  /* --- Estados semánticos ---------------------------------- */
  --ui-green:     #22c55e;
  --ui-green-bg:  #f0fdf4;
  --ui-red:       #ef4444;
  --ui-red-bg:    #fef2f2;
  --ui-amber:     #f59e0b;
  --ui-amber-bg:  #fffbeb;
  --ui-purple:    #8b5cf6;
  --ui-purple-bg: #f5f3ff;

  /* --- Colores de acento con transparencia (no usar rgba directo) */
  --ui-accent-border:  #C8D6F8;
  --ui-accent-shadow:  rgba(61,107,232,0.12);

  /* --- Geometría ------------------------------------------ */
  --radius-field: 6px;
  --radius-btn:   7px;
  --radius-card:  10px;
  --radius-modal: 14px;
  --radius-pill:  999px;

  /* --- Escala tipográfica ---------------------------------- */
  /* USO:
     --text-tiny    → meta info, badges, labels uppercase
     --text-small   → inputs, listas, contenido secundario
     --text-body    → texto general de la interfaz
     --text-label   → títulos de sección, headings de panel
     --text-heading → headings de página, empty states
  */
  --text-tiny:    11px;
  --text-small:   12px;
  --text-body:    13px;
  --text-label:   14px;
  --text-heading: 18px;

  /* --- Line heights --------------------------------------- */
  --lh-tight:   1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  /* --- Espaciado (grid de 4px) ---------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* --- Sombras -------------------------------------------- */
  --shadow-card:   0 1px 3px rgba(20,32,46,0.05);
  --shadow-modal:  0 8px 32px rgba(20,32,46,0.12);
  --shadow-focus:  0 0 0 3px var(--ui-accent-bg);

  /* --- Z-index (escala semántica) ------------------------- */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-modal:    200;
  --z-toast:    300;

  /* --- Fuente base ---------------------------------------- */
  --font-sans: 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', monospace;

  /* --- Layout -------------------------------------------- */
  --layout-content-width: 1280px;  /* ancho máximo del área de contenido en todos los módulos */

  /* --- Header de canvas (canónico) ----------------------- */
  /* Altura unificada del header del canvas/editor de cada módulo
     y del header del panel de chat de Queri. Mantener ambos
     iguales garantiza que la línea divisora horizontal coincida
     entre los dos paneles. */
  --header-height: 44px;
  --header-avatar-size: 24px;  /* avatar del chat de Queri en el header */

  /* --- creator-pro ---------------------------------------- */
  /* Layout v2: chat panel izq + canvas centro libre + rail der con
     ingredientes + capas; toolbar contextual flotante sobre la capa. */
  --cpro-rail-width:           248px;   /* rail derecho (ingredientes + capas) */
  --cpro-rail-collapsed:        44px;   /* ancho cuando colapsado a pill vertical */
  --cpro-thumb-size:            56px;   /* thumbnail de ingrediente */
  --cpro-canvas-max:           960px;   /* ancho máximo del stage; JS re-calcula según espacio */
}