/**
 * clarita stack. — Brand System
 * Paleta de Colores & Variables CSS
 * 
 * USAR ESTAS VARIABLES EN TODOS LOS DASHBOARDS
 * NO hardcodear colores directamente
 */

:root {
  /* ========================================
     PALETA PRINCIPAL
     ======================================== */
  
  /* Terracotta - Acento primario, CTAs, highlights */
  --color-terracotta: #D97757;
  --color-terracotta-light: #E59474;
  --color-terracotta-dark: #C7613D;
  --color-terracotta-text: #B3542E; /* Terracotta para texto, links y foco: 4.72:1 sobre warm-white (AA) */
  
  /* Warm White - Backgrounds principales */
  --color-warm-white: #FAF9F5;
  
  /* Sand - Bordes, divisores, backgrounds secundarios */
  --color-sand: #E8E6DC;
  --color-sand-light: #F0EEE6;
  
  /* Stone - Bordes y placeholders (#B0AEA5); texto secundario = stone-text */
  --color-stone: #B0AEA5;
  --color-stone-light: #C5C3BA;
  --color-stone-text: #6F6D66; /* Texto secundario canónico: 4.92:1 sobre warm-white (AA) */
  
  /* Ink - Texto principal, iconos */
  --color-ink: #191918;
  --color-ink-soft: #3A3A38;
  
  /* ========================================
     PALETA SEMÁNTICA
     ======================================== */
  
  /* Estados de éxito/error/warning/info */
  --color-success: #4CAF50;
  --color-error: #E74C3C;
  --color-warning: #F39C12;
  --color-info: #3498DB;

  /* Vidriera claritastack.app */
  --color-white: #FFFFFF;   /* Superficie elevada: steps, cards de ejemplos, ruta, firma */
  --color-deep: #2C2C2B;    /* Bloques CTA oscuros con texto warm-white (13.27:1) */
  --color-sage: #7A9B8D;    /* Íconos de confianza y checks; nunca texto de cuerpo */
  
  /* ========================================
     APLICACIONES CONTEXTUALES
     ======================================== */
  
  /* Texto */
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-stone-text); /* antes --color-stone (#B0AEA5, 2.11:1) */
  --text-tertiary: var(--color-stone-light);
  --text-inverse: var(--color-warm-white);
  --text-on-accent: #191918; /* Texto sobre terracotta: 5.64:1, fijo en ambos temas. Nunca blanco (2.96:1) */
  --text-on-accent-hover: var(--color-warm-white); /* Texto sobre terracotta-text (hover de btn-primary): 4.72:1 */
  
  /* Backgrounds */
  --bg-primary: var(--color-warm-white);
  --bg-surface: var(--color-white);
  --bg-secondary: var(--color-sand-light);
  --bg-tertiary: var(--color-sand);
  --bg-accent: var(--color-terracotta);
  
  /* Bordes */
  --border-light: var(--color-sand);
  --border-medium: var(--color-stone-light);
  --border-dark: var(--color-stone);
  
  /* Interacciones */
  --hover-overlay: rgba(217, 119, 87, 0.08);
  --active-overlay: rgba(217, 119, 87, 0.12);
  --focus-ring: var(--color-terracotta-text);
  
  /* ========================================
     SISTEMA DE ESPACIADO
     ======================================== */
  
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  
  /* ========================================
     TIPOGRAFÍA
     ======================================== */
  
  /* Font Families */
  --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;
  
  /* Font Sizes */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  
  /* Font Weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  
  /* Line Heights */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  
  /* ========================================
     BORDES & SOMBRAS
     ======================================== */
  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-button: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* Sombras sutiles (warm minimalism) */
  --shadow-sm: 0 1px 2px rgba(25, 25, 24, 0.04);
  --shadow-md: 0 2px 8px rgba(25, 25, 24, 0.06);
  --shadow-lg: 0 4px 16px rgba(25, 25, 24, 0.08);
  --shadow-accent: 0 4px 12px rgba(217, 119, 87, 0.3); /* Hover de btn-primary */
  
  /* ========================================
     TRANSICIONES
     ======================================== */
  
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  
  /* ========================================
     Z-INDEX SCALE
     ======================================== */
  
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-tooltip: 400;
}

/* ========================================
   TEMA OSCURO (opcional para futuro)
   ======================================== */

@media (prefers-color-scheme: dark) {
  :root.theme-auto {
    --color-warm-white: #1A1A19;
    --color-sand: #2A2A28;
    --color-sand-light: #323230;
    --color-stone: #757571;
    --color-ink: #FAF9F5;
    --color-white: #2A2A28;
    --color-stone-text: #B0AEA5;
    --color-terracotta-text: #D97757;
    --text-on-accent-hover: #191918;
    
    --text-primary: var(--color-ink);
    --bg-primary: var(--color-warm-white);
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-accent: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}