/* ===================================================================
   BLITZZIP MN - THEME VARIABLES
   Colores corporativos y variables de tema
   =================================================================== */

:root {
  /* === Colores Corporativos Blitzzip === */
  --brand-primary: #1A6F8C;      /* Azul petróleo (color principal logo) */
  --brand-secondary: #E5A935;    /* Amarillo dorado (acento logo) */
  --brand-primary-light: #2A8AAA;
  --brand-primary-dark: #125566;
  --brand-secondary-light: #F0B429;
  --brand-secondary-dark: #C88F1E;

  /* === Paleta de Grises === */
  --gray-50: #F8FAFB;
  --gray-100: #F1F4F7;
  --gray-200: #E3E8EF;
  --gray-300: #D1D9E3;
  --gray-400: #A8B4C5;
  --gray-500: #7C8A9F;
  --gray-600: #5A667F;
  --gray-700: #3E4858;
  --gray-800: #252B36;
  --gray-900: #121A2B;

  /* === Colores Semánticos === */
  --color-success: #0F9D58;
  --color-success-light: #E7F8EE;
  --color-success-border: #8AD6A5;

  --color-warning: #E5A935;
  --color-warning-light: #FFF5DD;
  --color-warning-border: #FFD58F;

  --color-error: #D93025;
  --color-error-light: #FFEAEA;
  --color-error-border: #F1A3A3;

  --color-info: #1A6F8C;
  --color-info-light: #EAF2FF;
  --color-info-border: #79ABFF;

  /* === Fondos y Superficies === */
  --bg-main: var(--gray-50);
  --bg-canvas: #FFFFFF;
  --bg-elevated: rgba(255, 255, 255, 0.95);
  --bg-overlay: rgba(18, 26, 43, 0.5);
  --bg-hover: var(--gray-100);
  --bg-active: var(--gray-200);

  /* === Textos === */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-on-brand: #FFFFFF;

  /* === Bordes === */
  --border-color: var(--gray-300);
  --border-light: var(--gray-200);
  --border-strong: var(--gray-400);

  /* === Sombras === */
  --shadow-sm: 0 2px 8px rgba(18, 26, 43, 0.06);
  --shadow-md: 0 8px 24px rgba(18, 26, 43, 0.10);
  --shadow-lg: 0 16px 48px rgba(18, 26, 43, 0.14);
  --shadow-xl: 0 24px 70px rgba(18, 26, 43, 0.18);

  /* === Espaciado === */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* === Radios === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* === Transiciones === */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* === Tipografía === */
  --font-family: "Inter", "Segoe UI Variable", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono: "Cascadia Code", "Consolas", "SF Mono", monospace;

  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

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

  /* === Z-index === */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-toast: 600;
}

/* Stitch redesign: dark technical SaaS palette */
:root {
  color-scheme: dark;
  --brand-primary: #257da0;
  --brand-secondary: #f2bd45;
  --brand-primary-light: #3c9bc0;
  --brand-primary-dark: #175d79;
  --brand-secondary-light: #ffd66f;
  --brand-secondary-dark: #cf9323;

  --gray-50: #f5f7fa;
  --gray-100: #e9edf2;
  --gray-200: #d6dde6;
  --gray-300: #bdc7d3;
  --gray-400: #8f9cab;
  --gray-500: #748191;
  --gray-600: #566171;
  --gray-700: #303946;
  --gray-800: #1b222b;
  --gray-900: #0b0f14;

  --color-success: #58c779;
  --color-success-light: rgba(50, 166, 89, 0.14);
  --color-success-border: rgba(88, 199, 121, 0.38);
  --color-warning: #e5aa3a;
  --color-warning-dark: #f0bf5b;
  --color-warning-light: rgba(229, 170, 58, 0.14);
  --color-warning-border: rgba(229, 170, 58, 0.38);
  --color-error: #ef6868;
  --color-error-light: rgba(225, 70, 70, 0.14);
  --color-error-border: rgba(239, 104, 104, 0.4);
  --color-info: #55a9d0;
  --color-info-light: rgba(37, 125, 160, 0.14);
  --color-info-border: rgba(85, 169, 208, 0.4);

  --bg-main: #080b0f;
  --bg-canvas: #11161c;
  --bg-elevated: rgba(17, 22, 28, 0.96);
  --bg-overlay: rgba(2, 5, 8, 0.82);
  --bg-hover: #1a222b;
  --bg-active: #222d38;

  --text-primary: #f3f6f8;
  --text-secondary: #b2bdc8;
  --text-muted: #7f8b98;
  --text-on-brand: #071014;

  --border-color: #344352;
  --border-light: #26323e;
  --border-strong: #405466;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.36);
  --shadow-xl: 0 28px 80px rgba(0, 0, 0, 0.52);

  --radius-sm: 7px;
  --radius-md: 9px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

/* === Tema Oscuro (opcional para futuro) === */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg-main: var(--gray-900);
    --bg-canvas: var(--gray-800);
    --bg-elevated: rgba(37, 43, 54, 0.95);
    --bg-hover: var(--gray-700);
    --bg-active: var(--gray-600);

    --text-primary: var(--gray-50);
    --text-secondary: var(--gray-300);
    --text-muted: var(--gray-400);

    --border-color: var(--gray-600);
    --border-light: var(--gray-700);
    --border-strong: var(--gray-500);
  }
}