/**
 * TinkuBot 2026 - Design Tokens
 * CSS Custom Properties para consistencia del sistema de diseño
 *
 * Basado en: architectural-design/tokens/README.md
 * Fecha: 24 de Enero de 2026
 */

/* ============================================================
   1. COLOR TOKENS
   ============================================================ */

:root {
  /* ----- Principales - Azure Fresh ----- */
  --azure: #0EA5E9;
  --azure-dark: #0284C7;
  --azure-light: #E0F2FE;

  /* ----- WhatsApp ----- */
  --whatsapp: #25D366;
  --whatsapp-dark: #128C7E;

  /* ----- Provider/Teal ----- */
  --provider: #0D9488;
  --provider-dark: #0F766E;
  --provider-light: #CCFBF1;

  /* ----- Accent - Lima ----- */
  --lime: #84CC16;
  --lime-dark: #65A30D;
  --lime-light: #ECFCCB;

  /* ----- Realtime - Violet ----- */
  --violet: #8B5CF6;
  --violet-light: #F3E8FF;

  /* ----- Neutros ----- */
  --background: #FFFFFF;
  --foreground: #0F172A;
  --muted: #64748B;
  --border: #E2E8F0;
  --card: #FFFFFF;

  /* ----- Semánticos ----- */
  --success: var(--whatsapp);
  --warning: #F59E0B;
  --error: #EF4444;
  --info: #3B82F6;
}

/* ============================================================
   2. TYPOGRAPHY TOKENS
   ============================================================ */

:root {
  /* Font Family */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                        Roboto, Helvetica, Arial, sans-serif;

  /* Font Sizes (Rem-based) */
  --font-size-h1: 3rem;      /* 48px */
  --font-size-h2: 2.25rem;   /* 36px */
  --font-size-h3: 1.5rem;    /* 24px */
  --font-size-h4: 1.25rem;   /* 20px */
  --font-size-body: 1rem;     /* 16px */
  --font-size-small: 0.875rem; /* 14px */
  --font-size-caption: 0.75rem; /* 12px */

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-normal: 1.2;
  --line-height-relaxed: 1.3;
  --line-height-loose: 1.5;
}

/* ============================================================
   3. SPACING TOKENS (Base 4 System)
   ============================================================ */

:root {
  /* Spacing Scale */
  --spacing-1: 4px;    /* xs */
  --spacing-2: 8px;    /* sm */
  --spacing-3: 12px;   /* md */
  --spacing-4: 16px;   /* lg */
  --spacing-5: 20px;
  --spacing-6: 24px;   /* xl */
  --spacing-8: 32px;   /* 2xl */
  --spacing-12: 48px;  /* 3xl */
  --spacing-16: 64px;  /* 4xl */
  --spacing-24: 96px;  /* 5xl */

  /* Context-Specific Spacing */
  --page-padding-mobile: var(--spacing-8);
  --page-padding-desktop: 120px;
  --card-padding: var(--spacing-6);
  --section-gap: var(--spacing-16) var(--spacing-24);
}

/* ============================================================
   4. BORDER RADIUS TOKENS
   ============================================================ */

:root {
  --radius-sm: 4px;     /* Tags, badges */
  --radius-md: 6px;     /* Inputs */
  --radius-lg: 8px;     /* Cards, botones */
  --radius-xl: 12px;    /* Modales, cards destacadas */
  --radius-pill: 9999px; /* Pills, tags redondeados */
}

/* ============================================================
   5. SHADOW TOKENS
   ============================================================ */

:root {
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}

/* Shadow elevations por estado */
:root {
  --shadow-default: var(--shadow-sm);
  --shadow-hover: var(--shadow-md);
  --shadow-focus: var(--shadow-lg);
}

/* ============================================================
   6. LAYOUT TOKENS
   ============================================================ */

:root {
  /* Container Widths */
  --container-mobile: 100%;
  --container-tablet: 720px;
  --container-desktop: 1024px;
  --container-wide: 1440px;

  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-tablet: 1023px;
  --breakpoint-desktop: 1024px;
}

/* ============================================================
   7. TRANSITION TOKENS
   ============================================================ */

:root {
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
}

/* ============================================================
   8. Z-INDEX SCALE
   ============================================================ */

:root {
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}