/* ═══════════════════════════════════════════════════════════════════════════════
   DOMO — Design System corporativo premium
   Paleta institucional DOMO + Palacios Asesores y Revisores.
   Dirección visual: enterprise dark, azul corporativo + dorado como acento.
═══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Marca */
  --brand-name: 'DOMO';
  --brand-owner: 'Palacios Asesores y Revisores';
  --brand-primary: #304274;
  --brand-accent: #D3B873;
  --brand-neutral: #DBDBDB;

  /* Primary — azul corporativo Palacios (#304274) */
  --primary-50:  #F0F3FA;
  --primary-100: #E1E7F3;
  --primary-200: #C3CEE7;
  --primary-300: #98A9D0;
  --primary-400: #667DAE;
  --primary-500: #304274;
  --primary-600: #293966;
  --primary-700: #223056;
  --primary-800: #1B2746;
  --primary-900: #121A31;

  /* Secondary — azul corporativo de profundidad */
  --secondary-50:  #EEF7FF;
  --secondary-100: #DCEEFF;
  --secondary-200: #B8DDFF;
  --secondary-300: #83C4FF;
  --secondary-400: #3EA2F2;
  --secondary-500: #006FCB;
  --secondary-600: #005EAD;
  --secondary-700: #004B8A;
  --secondary-800: #003B70;
  --secondary-900: #00264A;

  /* Accent — dorado corporativo Palacios (#D3B873) */
  --accent-50:  #FBF8EF;
  --accent-100: #F6F0DD;
  --accent-200: #EDE0BB;
  --accent-300: #E2CE98;
  --accent-400: #D3B873;
  --accent-500: #B99C55;
  --accent-600: #987E42;
  --accent-700: #766234;
  --accent-800: #564727;
  --accent-900: #382F1D;

  /* Fondos — dark enterprise con tinte azul */
  --color-bg:             #050B14;
  --color-surface:        #08111F;
  --color-surface-alt:    #0D1A2C;
  --color-surface-raised: #10243A;
  --color-surface-hover:  #112844;
  --color-surface-active: #143154;

  /* Bordes */
  --color-border:        rgba(126, 185, 247, 0.13);
  --color-border-subtle: rgba(126, 185, 247, 0.07);
  --color-border-strong: rgba(126, 185, 247, 0.22);

  /* Texto */
  --color-text:         #F3F8FF;
  --color-text-muted:   #A9B8CD;
  --color-text-subtle:  #71839B;
  --color-text-faint:   #40546F;
  --color-text-inverse: #FFFFFF;

  /* Acento funcional principal */
  --color-primary:         var(--primary-500);
  --color-primary-hover:   var(--primary-400);
  --color-primary-active:  var(--primary-700);
  --color-primary-light:   rgba(48, 66, 116, 0.24);
  --color-primary-subtle:  rgba(48, 66, 116, 0.14);
  --color-primary-border:  rgba(211, 184, 115, 0.38);
  --color-primary-glow:    rgba(48, 66, 116, 0.30);

  /* Semánticos */
  --color-success:        #16C784;
  --color-success-light:  rgba(22, 199, 132, 0.13);
  --color-success-fg:     #86F2C3;

  --color-warning:        #F5A524;
  --color-warning-light:  rgba(245, 165, 36, 0.14);
  --color-warning-fg:     #FFD98A;

  --color-danger:         #FF4D6D;
  --color-danger-light:   rgba(255, 77, 109, 0.14);
  --color-danger-fg:      #FFB3C1;

  --color-info:           var(--accent-400);
  --color-info-light:     rgba(66, 199, 244, 0.14);
  --color-info-fg:        #A8EEFF;

  /* Prioridades */
  --priority-low:      #71839B;
  --priority-medium:   var(--accent-500);
  --priority-high:     #F5A524;
  --priority-critical: #FF4D6D;

  /* Estados de proyecto */
  --status-planning: #A9B8CD;
  --status-active:   var(--primary-500);
  --status-paused:   #F5A524;
  --status-done:     #16C784;
  --status-canceled: #40546F;

  /* Paleta de gráficas DOMO */
  --chart-1: #D3B873;
  --chart-2: #304274;
  --chart-3: #3EA2F2;
  --chart-4: #16C784;
  --chart-5: #F5A524;
  --chart-6: #7C5CFF;
  --chart-7: #FF4D6D;
  --chart-8: #8BE8FF;
  --chart-grid: rgba(126, 185, 247, 0.08);
  --chart-axis: #71839B;

  /* Sombras premium multi-capa */
  --shadow-xs: 0 1px 2px rgba(0, 8, 20, 0.46);
  --shadow-sm: 0 1px 3px rgba(0, 8, 20, 0.55), 0 1px 2px rgba(0, 8, 20, 0.38);
  --shadow-md: 0 6px 18px rgba(0, 10, 28, 0.46), 0 2px 6px rgba(0, 10, 28, 0.36);
  --shadow-lg: 0 14px 34px rgba(0, 10, 28, 0.58), 0 6px 14px rgba(0, 10, 28, 0.38), 0 0 0 1px rgba(126,185,247,0.06);
  --shadow-xl: 0 28px 70px rgba(0, 10, 28, 0.68), 0 12px 24px rgba(0, 10, 28, 0.48), 0 0 0 1px rgba(126,185,247,0.08);
  --shadow-topbar: 0 1px 0 rgba(126,185,247,0.10), 0 8px 28px rgba(0, 15, 40, 0.38);
  --shadow-nav-active: 0 6px 18px rgba(1, 77, 164, 0.28), 0 0 0 1px rgba(66, 199, 244, 0.22), inset 0 1px 0 rgba(255,255,255,0.08);
  --shadow-glow-primary: 0 0 24px var(--color-primary-glow);

  /* Radios */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* Espaciado */
  --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-16: 64px;

  /* Tipografía */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;
  --text-4xl:  36px;

  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Transiciones */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-fast: 100ms var(--ease-in-out);
  --transition-base: 180ms var(--ease-in-out);
  --transition-slow: 280ms var(--ease-out);

  /* Z-index */
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-modal-backdrop: 900;
  --z-modal:          1000;
  --z-toast:          1100;
}

[data-theme="light"] {
  --color-bg:             #F4F8FC;
  --color-surface:        #FFFFFF;
  --color-surface-alt:    #EEF5FC;
  --color-surface-raised: #FFFFFF;
  --color-surface-hover:  #E8F2FC;
  --color-surface-active: #DCEBFA;

  --color-border:        rgba(1, 77, 164, 0.12);
  --color-border-subtle: rgba(1, 77, 164, 0.07);
  --color-border-strong: rgba(1, 77, 164, 0.20);

  --color-text:         #061427;
  --color-text-muted:   #52657C;
  --color-text-subtle:  #8AA0B8;
  --color-text-faint:   #C0CDDA;
  --color-text-inverse: #FFFFFF;

  --color-primary-light:   rgba(1, 77, 164, 0.10);
  --color-primary-subtle:  rgba(1, 77, 164, 0.07);
  --color-primary-border:  rgba(1, 77, 164, 0.25);
  --color-primary-glow:    rgba(1, 77, 164, 0.16);

  --chart-grid: rgba(1, 77, 164, 0.07);
  --chart-axis: #71839B;

  --shadow-xs: 0 1px 2px rgba(1, 35, 80, 0.05);
  --shadow-sm: 0 1px 3px rgba(1, 35, 80, 0.08), 0 1px 2px rgba(1, 35, 80, 0.05);
  --shadow-md: 0 8px 24px rgba(1, 35, 80, 0.10), 0 2px 6px rgba(1, 35, 80, 0.06);
  --shadow-lg: 0 16px 42px rgba(1, 35, 80, 0.13), 0 6px 14px rgba(1, 35, 80, 0.07), 0 0 0 1px rgba(1, 77, 164, 0.04);
  --shadow-xl: 0 28px 70px rgba(1, 35, 80, 0.17), 0 12px 24px rgba(1, 35, 80, 0.08), 0 0 0 1px rgba(1, 77, 164, 0.04);
  --shadow-topbar: 0 1px 0 rgba(1,77,164,0.10), 0 8px 24px rgba(1,35,80,0.08);
  --shadow-nav-active: 0 6px 18px rgba(1, 77, 164, 0.15), 0 0 0 1px rgba(1, 77, 164, 0.10);
}