/* ========================================
   1. COLOR SYSTEM
   ======================================== */

/* ======================================== */
/* NEXORA OFFICIAL BRAND COLORS */
/* ======================================== */

:root {
   /* Primary Navy Palette (Deep Professional) */
   --brand-navy-deep: #081120;        /* Official primary dark */
   --brand-navy-medium: #122544;      /* Official medium navy */
   --navy-deep: #081120;              /* Alias for compatibility */
   --navy-soft: #122544;              /* Updated to brand color */
   --navy-darker: #0A1428;            /* Supporting dark */
   --navy-accent: #1a2847;            /* Supporting accent */

   /* Accent Turquoise Palette (Innovation & Trust) */
   --brand-turquoise: #5ED0C8;        /* Official primary turquoise */
   --brand-turquoise-light: #6FE3E8;  /* Official light turquoise */
   --turquoise-main: #5ED0C8;         /* Updated to brand color */
   --turquoise-glow: #6FE3E8;         /* Updated to brand color */
   --turquoise-light: #a8f0ea;        /* Supporting light */
   --turquoise-dark: #3db8b0;         /* Supporting dark */
   
   /* Brand Gray */
   --brand-gray: #4A5568;             /* Official neutral gray */
   
   /* Neutral Palette */
   --white-soft: #F2F6F9;
   --gray-neutral: #9FB3C8;
   --gray-medium: #6b7c94;
   --gray-dark: #4a5568;
   
   /* Semantic Colors */
   --success: #4ade80;
   --warning: #fbbf24;
   --error: #f87171;
   --info: var(--turquoise-main);
   --navy:#081120;
   --navy2:#122544;
   --navy3:#081120;
   --turq:#5ED0C8;
   --white:#F2F6F9;
   --gray:#9FB3C8;
   --line:rgba(255,255,255,.08);
   --lineStrong:rgba(94,208,200,.26);
   --panel:rgba(255,255,255,.05);
   --panel2:rgba(255,255,255,.03);
   --shadow:0 18px 60px rgba(0,0,0,.28);
   --container:min(1240px, calc(100vw - 48px));
   --weight-semibold: 600;
   --weight-bold: 700;
   --weight-extrabold: 800;

   /* Line Heights */
   --leading-tight: 1.1;
   --leading-normal: 1.5;
   --leading-relaxed: 1.75;
   --leading-loose: 2;

   /* ========================================
      SPACING SYSTEM (8px base)
   ======================================== */

   --space-xs: 0.5rem;      /* 8px */
   --space-sm: 0.75rem;     /* 12px */
   --space-md: 1rem;        /* 16px */
   --space-lg: 1.5rem;      /* 24px */
   --space-xl: 2rem;        /* 32px */
   --space-2xl: 3rem;       /* 48px */
   --space-3xl: 4rem;       /* 64px */
   --space-4xl: 6rem;       /* 96px */
   --space-5xl: 8rem;       /* 128px */

   /* ========================================
     SHADOW SYSTEM
   ======================================== */

   /* Elevation Shadows */
   --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08),0 1px 2px rgba(0, 0, 0, 0.04);
   --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12),0 2px 4px rgba(0, 0, 0, 0.06);
   --shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.18),0 4px 8px rgba(0, 0, 0, 0.08);
   --shadow-premium: 0 28px 80px rgba(0, 0, 0, 0.35),0 12px 40px rgba(0, 0, 0, 0.15);
   
   /* Glow Effects (Brand Identity) */
   --glow-subtle: 0 0 16px rgba(94, 208, 200, 0.1);
   --glow-medium: 0 0 20px rgba(94, 208, 200, 0.15),0 0 40px rgba(94, 208, 200, 0.08);
   --glow-strong: 0 0 30px rgba(94, 208, 200, 0.25),0 0 60px rgba(94, 208, 200, 0.12),0 0 90px rgba(94, 208, 200, 0.06);
   --glow-premium: 0 0 40px rgba(94, 208, 200, 0.3),0 0 80px rgba(94, 208, 200, 0.15),0 0 120px rgba(94, 208, 200, 0.08);
   
   /* ========================================
      BORDER SYSTEM
   ======================================== */
   
   /* Border Widths */
   --border-thin: 1px;
   --border-medium: 2px;
   --border-thick: 3px;
   
   /* Border Colors */
   --border-subtle: rgba(255, 255, 255, 0.08);
   --border-light: rgba(255, 255, 255, 0.12);
   --border-medium: rgba(255, 255, 255, 0.18);
   --border-brand: rgba(94, 208, 200, 0.28);
   --border-strong: rgba(94, 208, 200, 0.45);
   
   /* Border Radius */
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-xl: 20px;
   --radius-2xl: 24px;
   --radius-3xl: 28px;
   --radius-full: 9999px;
   
   /* ========================================
      LAYOUT SYSTEM
   ======================================== */

   /* Container Widths */
   --container-sm: 640px;
   --container-md: 768px;
   --container-lg: 1024px;
   --container-xl: 1220px;
   --container-2xl: 1400px;
   --container: min(1220px, calc(100vw - 48px));
   
   /* Z-Index Scale */
   --z-base: 1;
   --z-dropdown: 100;
   --z-sticky: 200;
   --z-overlay: 300;
   --z-modal: 400;
   --z-popover: 500;
   --z-toast: 600;
   
   /* ========================================
      TRANSITION SYSTEM
   ======================================== */
   
   /* Durations */
   --duration-fast: 150ms;
   --duration-normal: 250ms;
   --duration-slow: 350ms;
   --duration-slower: 500ms;
   
   /* Easings */
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-smooth: cubic-bezier(0.45, 0, 0.15, 1);
   
   /* ========================================
      BACKGROUND SYSTEM
   ======================================== */
   
   /* Card Backgrounds */
   --bg-card: rgba(255, 255, 255, 0.045);
   --bg-card-hover: rgba(255, 255, 255, 0.075);
   --bg-card-elevated: rgba(255, 255, 255, 0.055);
   
   /* Overlay Backgrounds */
   --bg-overlay: rgba(15, 27, 52, 0.85);
   --bg-backdrop: rgba(8, 17, 32, 0.74);
   
   /* Gradient Backgrounds */
   --gradient-primary: linear-gradient(135deg, var(--turquoise-main), var(--turquoise-glow));
   --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.035));
   --gradient-card-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05));
   --gradient-navy: linear-gradient(180deg, #081120 0%, #0F1B34 45%, #091327 100%);
   
   /* ========================================
      LEGACY COMPATIBILITY
      (Mantener nombres antiguos para no romper código)
   ======================================== */
   
   --navy: var(--navy-deep);
   --navy2: var(--navy-soft);
   --navy3: var(--navy-darker);
   --turq: var(--turquoise-main);
   --turq2: var(--turquoise-glow);
   --white: var(--white-soft);
   --muted: var(--gray-neutral);
   --line: var(--border-subtle);
   --lineStrong: var(--border-brand);
   --card: var(--bg-card);
   --shadow: var(--shadow-premium);
   --glow-turq: var(--glow-medium);
   --glow-turq-strong: var(--glow-strong);
   --radius: var(--radius-3xl);
}