/* ============================================================
   ELANIIN REPORT SYSTEM — BASE TOKENS
   Basado en Elaniin Website UI Kit 2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Inter:wght@400;500;600;700&family=Azeret+Mono:wght@400;500;600&display=swap');

:root {
  /* --- BRAND CORE --- */
  --inspire-blue:    #023BFD;  /* Inspire Blue */
  --excellence-blue: #000040;  /* Excellence Blue */
  --elaniin-black:   #0C0C0C;  /* Elaniin Black */
  --elevate-grey:    #4E4C4C;  /* Elevate Grey */
  --white:           #FFFFFF;
  --green:           #1E7A4A;

  /* --- NEW BRAND COLORS --- */
  --elevate-blue:    #1054FF;  /* Elevate Blue */
  --encourage-blue:  #0066FF;  /* Encourage Blue */
  --innovation-blue: #BFD9FF;  /* Innovation Blue */
  --tech-blue:       #EDF1FF;  /* Tech Blue */

  /* --- BLUE SCALE --- */
  --blue-50:  #F2F5FF;  /* Cloud Blue */
  --blue-100: #EDF1FF;  /* Tech Blue */
  --blue-200: #BFD9FF;  /* Innovation Blue */
  --blue-300: #99B0FE;  /* Soft Blue */
  --blue-400: #4D75FD;  /* Dynamic Blue */
  --blue-500: #0066FF;  /* Encourage Blue */
  --blue-600: #1054FF;  /* Elevate Blue */
  --blue-700: #023BFD;  /* Inspire Blue */
  --blue-800: #000083;  /* Deep Blue */
  --blue-900: #000040;  /* Excellence Blue */

  /* --- COLOR ROLES --- */
  --color-primary:       #023BFD;
  --color-primary-hover: #0034E3;
  --color-primary-dark:  #002CBD;
  --color-primary-cta:   #0F45F9;
  --color-secondary:     #0066FE;
  --color-brand-navy:    #000040;

  /* --- BACKGROUNDS --- */
  --bg-page:        #FFFFFF;
  --bg-section-alt: #F2F7FF;
  --bg-hero:        #000040;
  --bg-card:        #FFFFFF;
  --bg-blue-soft:   #B5DAFF;

  /* --- TEXT --- */
  --fg-primary:   #0C0C0C;
  --fg-body:      #313131;
  --fg-secondary: #636363;
  --fg-muted:     #929292;
  --fg-disabled:  #CECECE;
  --fg-on-dark:   #FFFFFF;
  --fg-accent:    #023BFD;

  /* --- BORDERS --- */
  --color-border:      #D8D8D8;
  --color-border-dark: #000040;
  --color-border-blue: #023BFD;

  /* --- ESTADOS DE PROYECTO --- */
  --estado-completado-text:  #1E7A4A;
  --estado-completado-bg:    #D6F0E2;
  --estado-completado-border:#A8DCC0;

  --estado-progreso-text:    #023BFD;
  --estado-progreso-bg:      #E6EBFF;
  --estado-progreso-border:  #BFCEFE;

  --estado-riesgo-text:      #9A6100;
  --estado-riesgo-bg:        #FDF0D5;
  --estado-riesgo-border:    #F5D48A;

  --estado-bloqueado-text:   #9B2020;
  --estado-bloqueado-bg:     #FADADD;
  --estado-bloqueado-border: #F0AAAA;

  --estado-pendiente-text:   #636363;
  --estado-pendiente-bg:     #F0F0F0;
  --estado-pendiente-border: #D8D8D8;

  /* --- SEMANTIC --- */
  --color-success: #34A853;
  --color-error:   #F57469;
  --color-warning: #FBBC04;
  --color-info:    #4285F4;

  /* --- TYPOGRAPHY --- */
  --font-display: 'DM Sans', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'Azeret Mono', monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  28px;
  --text-3xl:  35px;
  --text-4xl:  40px;
  --text-5xl:  56px;

  --leading-tight:   1.1;
  --leading-snug:    1.2;
  --leading-normal:  1.4;
  --leading-relaxed: 1.5;
  --leading-loose:   1.75;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.12em;

  /* --- SPACING --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-15: 60px;
  --space-16: 64px;
  --space-20: 80px;

  /* --- BORDER RADIUS --- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* --- SHADOWS --- */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.10);
  --shadow-card: 0 2px 12px rgba(2,59,253,0.08);

  /* --- TRANSITIONS --- */
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}