/**
 * Design Tokens - Sistema centralizado de variables CSS
 * Reemplaza tokens autogenerados de Framer con nombres semánticos
 */

:root {
  /* ============================================ */
  /* COLORS - Sistema de colores semántico      */
  /* ============================================ */

  /* Primary Brand Colors */
  --color-primary: #0478b2;           /* Azul principal (botones, links) */
  --color-primary-dark: #004656;      /* Azul oscuro (textos, fondos) */
  --color-primary-darker: #1a5f6f;    /* Azul más oscuro */

  /* Accent Colors */
  --color-accent-green: #00ffb2;      /* Verde neón (CTA principal) */
  --color-accent-green-light: #90ffbb; /* Verde claro (hover states) */
  --color-accent-green-glow: rgba(0, 255, 178, 0.1); /* Verde glow effect */
  --color-accent-green-glow-strong: rgba(42, 240, 124, 0.3); /* Verde glow intenso */

  /* Neutral Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-dark: #17171d;
  --color-gray-light: #e5e5e5;

  /* Functional Colors */
  --color-error: #ff0066;
  --color-text-primary: #004656;
  --color-text-secondary: rgba(0, 70, 86, 0.85);
  --color-text-muted: rgba(95, 95, 113, 0.22);

  /* Overlay & Background Colors */
  --color-overlay-light: rgba(255, 255, 255, 0.1);
  --color-overlay-dark: rgba(0, 0, 0, 0.08);
  --color-bg-hover: rgba(4, 120, 178, 0.05);
  --color-bg-white-gradient-start: rgba(255, 255, 255, 0.85);
  --color-bg-white-gradient-mid: rgba(255, 255, 255, 0.75);
  --color-bg-body: #ffffff;
  --color-bg-card: #ffffff;
  --color-bg-secondary: #f8f9fb;

  /* Border Colors */
  --color-border-light: rgba(95, 95, 113, 0.22);
  --color-border-dark: rgba(0, 0, 0, 0.04);

  /* RGB Color Values (for rgba() usage) */
  --color-primary-rgb: 4, 120, 178;           /* #0478b2 */
  --color-primary-dark-rgb: 0, 70, 86;        /* #004656 */
  --color-accent-green-rgb: 0, 255, 178;      /* #00ffb2 */
  --color-white-rgb: 255, 255, 255;           /* #ffffff */
  --color-black-rgb: 0, 0, 0;                 /* #000000 */
  --color-gray-rgb: 95, 95, 113;              /* #5f5f71 */

  /* Opacity Levels (for consistent transparency) */
  --opacity-subtle: 0.03;     /* Very light backgrounds */
  --opacity-light: 0.05;      /* Light backgrounds */
  --opacity-medium: 0.1;      /* Medium backgrounds */
  --opacity-strong: 0.3;      /* Strong overlays */
  --opacity-semitransparent: 0.7;  /* Semi-transparent elements */
  --opacity-opaque: 0.85;     /* Nearly opaque elements */

  /* ============================================ */
  /* SPACING - Sistema de espaciado de 8px      */
  /* ============================================ */

  --space-0: 0;
  --space-1: 4px;     /* 0.5 unidades */
  --space-2: 8px;     /* 1 unidad base */
  --space-3: 12px;    /* 1.5 unidades */
  --space-4: 16px;    /* 2 unidades */
  --space-5: 20px;    /* 2.5 unidades */
  --space-6: 24px;    /* 3 unidades */
  /* --space-7: 28px; */    /* DEPRECATED: No usado actualmente - Mantener comentado para rollback */
  --space-8: 32px;    /* 4 unidades */
  --space-10: 40px;   /* 5 unidades */
  --space-12: 48px;   /* 6 unidades */
  --space-16: 64px;   /* 8 unidades */
  --space-20: 80px;   /* 10 unidades */
  --space-24: 96px;   /* 12 unidades */

  /* ============================================ */
  /* TYPOGRAPHY - Tipografía y tamaños          */
  /* ============================================ */

  /* Font Families */
  --font-primary: "DM Sans", "DM Sans Placeholder", sans-serif;
  --font-secondary: "Inter", sans-serif;

  /* Font Sizes */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 38px;
  --font-size-5xl: 54px;
  --font-size-6xl: 68px;

  /* Font Weights */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --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-snug: 1.2;
  --line-height-normal: 1.3;
  --line-height-relaxed: 1.5;
  --line-height-loose: 1.6;

  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.5px;

  /* ============================================ */
  /* BREAKPOINTS - Responsive design             */
  /* ============================================ */

  --breakpoint-mobile: 809px;
  --breakpoint-tablet: 810px;
  --breakpoint-desktop: 1200px;

  /* ============================================ */
  /* LAYOUT - Contenedores y dimensiones        */
  /* ============================================ */

  --container-max-width: 1240px;
  --container-max-width-lg: 1300px;
  --container-max-width-md: 1100px;
  --container-max-width-sm: 900px;
  --container-max-width-xs: 800px;
  --container-max-width-2xs: 600px;

  --navbar-height: 64px;
  --navbar-z-index: 1000;

  /* ============================================ */
  /* BORDERS & RADII - Bordes y esquinas        */
  /* ============================================ */

  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;

  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-lg-plus: 20px;  /* Between lg and xl */
  --border-radius-xl: 24px;
  --border-radius-pill: 100px;
  --border-radius-circle: 50%;

  /* ============================================ */
  /* SHADOWS - Sombras y elevaciones            */
  /* ============================================ */

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.12);
  --shadow-glow-green: 0px 0px 34px 0px rgba(42, 240, 124, 0.3),
                       0px 0px 0px 4px rgba(0, 255, 178, 0.1);

  /* ============================================ */
  /* TRANSITIONS - Animaciones y transiciones   */
  /* ============================================ */

  --transition-quick: 150ms ease;  /* Fastest transitions */
  --transition-fast: 200ms ease;   /* Fast transitions */
  --transition-base: 300ms ease;   /* Standard transitions */
  --transition-smooth: 400ms ease-out;  /* Smooth transitions */
  --transition-slow: 500ms ease;   /* Slow transitions */
  --transition-slower: 800ms ease; /* Slowest transitions */

  --easing-default: ease;
  /* DEPRECATED: Variables de easing no usadas - Mantener comentadas para rollback */
  /* --easing-in: ease-in; */
  /* --easing-out: ease-out; */
  /* --easing-in-out: ease-in-out; */
  --easing-custom: cubic-bezier(0.12, 0.23, 0.17, 0.99);

  /* ============================================ */
  /* Z-INDEX - Capas de apilamiento              */
  /* ============================================ */

  --z-index-base: 1;
  /* --z-index-overlay: 2; */    /* DEPRECATED: No usado actualmente */
  --z-index-navbar: 3;
  /* --z-index-dropdown: 100; */  /* DEPRECATED: No usado actualmente */
  --z-index-modal: 500;
  --z-index-navbar-fixed: 1000;
  /* --z-index-tooltip: 1500; */  /* DEPRECATED: No usado actualmente */

  /* ============================================ */
  /* BACKWARD COMPATIBILITY                      */
  /* Tokens de Framer para no romper existing CSS */
  /* ============================================ */

  --token-d8314751-3109-4e71-b0e5-25619a148f21: var(--color-primary);
  --token-0847a4bc-13bf-4d74-9d6a-967884fd94ee: var(--color-black);
  --token-9c9cb5e4-a45a-458a-9159-f07c4a87b234: var(--color-primary-dark);
  --token-0aa53fec-fefb-40a3-a229-e26994a82701: var(--color-gray-light);
  --token-0bfdbca7-f04c-4a38-a09a-dde5ad09763c: var(--color-black);
  --token-eedfa9ce-bd57-4a82-97a2-8ff71851193f: var(--color-primary-dark);
  --token-cf4471d1-e22d-4d41-914b-0cf5122a85b2: var(--color-primary-darker);
  --token-9007919a-6220-48cb-aaf7-459709bd96cf: var(--color-gray-dark);
  --token-202da0e8-7ad9-4bfb-98eb-ae8eca7d74ee: var(--color-white);
  --token-7ff9fd8d-ea1f-4a61-aaf4-96906927bdc7: var(--color-overlay-light);
  --token-4792f7f9-77cd-4430-9afb-252885300f1e: var(--color-error);
  --token-55201fdc-adaa-4fc7-8562-0b319ce59402: var(--color-accent-green-glow);
}

/* ============================================ */
/* DARK MODE - Dark theme variables            */
/* ============================================ */

[data-theme="dark"] {
  /* Background Colors - Darker for better contrast */
  --color-bg-body: #141b24;
  --color-bg-card: #141b24;
  --color-bg-secondary: #1a1f2e;
  --color-bg-hover: rgba(61, 173, 219, 0.15);

  /* Text Colors - Brighter for better readability */
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.9);
  --color-text-muted: rgba(255, 255, 255, 0.5);

  /* Border Colors - More visible */
  --color-border-light: rgba(255, 255, 255, 0.15);
  --color-border-dark: rgba(255, 255, 255, 0.1);

  /* Overlay Colors */
  --color-overlay-light: rgba(0, 0, 0, 0.4);
  --color-overlay-dark: rgba(0, 0, 0, 0.7);

  /* Gradient backgrounds */
  --color-bg-white-gradient-start: rgba(20, 27, 36, 0.95);
  --color-bg-white-gradient-mid: rgba(20, 27, 36, 0.85);

  /* Primary colors - Brighter blues for dark mode */
  --color-primary: #42a5f5;
  --color-primary-dark: #90caf9;

  /* Keep accent green bright */
  --color-accent-green: #00ffb2;
  --color-accent-green-light: #5affcd;

  /* Override Framer tokens for dark mode backgrounds */
  --token-202da0e8-7ad9-4bfb-98eb-ae8eca7d74ee: #141b24; /* Was white, now dark */
}

/* ============================================ */
/* SHARED ANIMATIONS                           */
/* ============================================ */

/* Shared spin animation for loading states */
@keyframes spin {
  to { transform: rotate(360deg); }
}