/* Mi Productora · Variables de diseño
   Dirección 2b Cobalto, definida en Claude Design (Ronda 2A), 2026-10-20.
   Modo oscuro = predeterminado en las pantallas; modo claro completo. */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  color-scheme: light;

  /* Fondo y superficies */
  --mp-color-bg: #F5F5F2;
  --mp-color-surface: #FFFFFF;
  --mp-color-surface-raised: #FFFFFF;
  --mp-color-surface-sunken: #EEEEEA;
  --mp-color-surface-hover: #F2F2EE;

  /* Bordes */
  --mp-color-border: #E2E2DD;
  --mp-color-border-strong: #CFCFC8;
  --mp-color-border-field: #8C919C;       /* 3,2:1 sobre superficie */

  /* Texto */
  --mp-color-text: #0E1220;
  --mp-color-text-secondary: #535A6B;
  --mp-color-text-tertiary: #6B7180;
  --mp-color-text-inverse: #FFFFFF;

  /* Cobalto (principal) */
  --mp-color-primary: #2A4FF5;
  --mp-color-primary-hover: #1F40DB;
  --mp-color-primary-active: #1934B8;
  --mp-color-primary-soft: #E8EDFF;
  --mp-color-primary-soft-hover: #D9E1FF;
  --mp-color-primary-text: #2443D6;
  --mp-color-on-primary: #FFFFFF;

  /* Coral (acento) */
  --mp-color-accent: #F25C3B;
  --mp-color-accent-hover: #DB4A2A;
  --mp-color-accent-soft: #FFECE6;
  --mp-color-accent-text: #C23E1F;
  --mp-color-on-accent: #0E1220;

  /* Éxito */
  --mp-color-success: #0F7553;
  --mp-color-success-hover: #0B6044;
  --mp-color-success-soft: #E2F2EA;
  --mp-color-success-text: #0F7553;
  --mp-color-on-success: #FFFFFF;

  /* Aviso */
  --mp-color-warning: #E59A12;
  --mp-color-warning-hover: #CC8608;
  --mp-color-warning-soft: #FDF2DA;
  --mp-color-warning-text: #8F5A00;
  --mp-color-on-warning: #0E1220;

  /* Error */
  --mp-color-error: #C41E3A;
  --mp-color-error-hover: #A8182F;
  --mp-color-error-soft: #FBE6E9;
  --mp-color-error-text: #C41E3A;
  --mp-color-on-error: #FFFFFF;

  /* Información */
  --mp-color-info: #2443D6;
  --mp-color-info-hover: #1934B8;
  --mp-color-info-soft: #EEF1FF;
  --mp-color-info-text: #2443D6;
  --mp-color-on-info: #FFFFFF;

  /* Deshabilitado, foco y capas */
  --mp-color-disabled-bg: #ECECE8;
  --mp-color-disabled-text: #9A9FAA;
  --mp-color-focus: #2A4FF5;
  --mp-color-focus-ring: rgba(42, 79, 245, .25);
  --mp-color-overlay: rgba(14, 18, 32, .42);

  /* Tipografía */
  --mp-font-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mp-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --mp-font-weight-regular: 400;
  --mp-font-weight-medium: 500;
  --mp-font-weight-semibold: 600;
  --mp-font-weight-bold: 700;

  --mp-font-size-2xs: 11px;   --mp-line-height-2xs: 14px;
  --mp-font-size-xs: 12px;    --mp-line-height-xs: 16px;
  --mp-font-size-sm: 13px;    --mp-line-height-sm: 18px;
  --mp-font-size-md: 15px;    --mp-line-height-md: 22px;
  --mp-font-size-lg: 17px;    --mp-line-height-lg: 26px;
  --mp-font-size-xl: 18px;    --mp-line-height-xl: 24px;
  --mp-font-size-2xl: 22px;   --mp-line-height-2xl: 28px;
  --mp-font-size-3xl: 28px;   --mp-line-height-3xl: 34px;
  --mp-font-size-4xl: 36px;   --mp-line-height-4xl: 42px;
  --mp-font-size-5xl: 48px;   --mp-line-height-5xl: 52px;
  --mp-font-size-metric: 32px; --mp-line-height-metric: 36px;

  --mp-letter-spacing-display: -0.035em;
  --mp-letter-spacing-heading: -0.025em;
  --mp-letter-spacing-snug: -0.01em;
  --mp-letter-spacing-label: 0.08em;

  /* Espaciados (retícula de 4 px) */
  --mp-space-0-5: 2px;
  --mp-space-1: 4px;
  --mp-space-2: 8px;
  --mp-space-3: 12px;
  --mp-space-4: 16px;
  --mp-space-5: 20px;
  --mp-space-6: 24px;
  --mp-space-8: 32px;
  --mp-space-10: 40px;
  --mp-space-12: 48px;
  --mp-space-16: 64px;
  --mp-space-20: 80px;

  /* Radios */
  --mp-radius-xs: 4px;
  --mp-radius-sm: 6px;
  --mp-radius-md: 8px;
  --mp-radius-lg: 12px;
  --mp-radius-xl: 16px;
  --mp-radius-full: 999px;

  /* Sombras */
  --mp-shadow-1: 0 1px 2px rgba(14, 18, 32, .06);
  --mp-shadow-2: 0 1px 2px rgba(14, 18, 32, .05), 0 6px 16px rgba(14, 18, 32, .08);
  --mp-shadow-3: 0 2px 6px rgba(14, 18, 32, .06), 0 24px 48px rgba(14, 18, 32, .16);
  --mp-shadow-focus: 0 0 0 2px var(--mp-color-bg), 0 0 0 4px var(--mp-color-focus);

  /* Movimiento */
  --mp-duration-fast: 120ms;
  --mp-duration-base: 180ms;
  --mp-duration-slow: 280ms;
  --mp-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --mp-ease-exit: cubic-bezier(.4, 0, 1, 1);

  /* Medidas de interfaz */
  --mp-control-height-sm: 32px;
  --mp-control-height-md: 40px;
  --mp-control-height-lg: 48px;
  --mp-topbar-height: 56px;
  --mp-reviewer-width: 340px;
  --mp-reviewer-rail: 48px;
  --mp-content-max: 1344px;

  /* Capas */
  --mp-z-dropdown: 20;
  --mp-z-sticky: 30;
  --mp-z-overlay: 40;
  --mp-z-modal: 50;
  --mp-z-toast: 60;
}

[data-theme="dark"] {
  color-scheme: dark;

  --mp-color-bg: #0E1118;
  --mp-color-surface: #161A24;
  --mp-color-surface-raised: #1C2130;
  --mp-color-surface-sunken: #0A0D13;
  --mp-color-surface-hover: #1A1F2B;

  --mp-color-border: #262C3A;
  --mp-color-border-strong: #343B4C;
  --mp-color-border-field: #5F677A;

  --mp-color-text: #EEF1F7;
  --mp-color-text-secondary: #A3ABBC;
  --mp-color-text-tertiary: #848CA0;
  --mp-color-text-inverse: #0E1220;

  --mp-color-primary: #6E8BFF;
  --mp-color-primary-hover: #8AA2FF;
  --mp-color-primary-active: #5774F0;
  --mp-color-primary-soft: #1F2A52;
  --mp-color-primary-soft-hover: #27346A;
  --mp-color-primary-text: #93A8FF;
  --mp-color-on-primary: #0B0E16;

  --mp-color-accent: #FF9A6A;
  --mp-color-accent-hover: #FFB088;
  --mp-color-accent-soft: #3A2620;
  --mp-color-accent-text: #FF9A6A;
  --mp-color-on-accent: #0B0E16;

  --mp-color-success: #3DD39A;
  --mp-color-success-hover: #62DFAF;
  --mp-color-success-soft: #11302A;
  --mp-color-success-text: #3DD39A;
  --mp-color-on-success: #0B0E16;

  --mp-color-warning: #F7BE4A;
  --mp-color-warning-hover: #F9CB6B;
  --mp-color-warning-soft: #33290F;
  --mp-color-warning-text: #F7BE4A;
  --mp-color-on-warning: #0B0E16;

  --mp-color-error: #FF5D73;
  --mp-color-error-hover: #FF7A8C;
  --mp-color-error-soft: #3D1A22;
  --mp-color-error-text: #FF5D73;
  --mp-color-on-error: #1A0B0F;

  --mp-color-info: #93A8FF;
  --mp-color-info-hover: #ADBDFF;
  --mp-color-info-soft: #1A2240;
  --mp-color-info-text: #93A8FF;
  --mp-color-on-info: #0B0E16;

  --mp-color-disabled-bg: #1E2230;
  --mp-color-disabled-text: #5E6578;
  --mp-color-focus: #6E8BFF;
  --mp-color-focus-ring: rgba(110, 139, 255, .40);
  --mp-color-overlay: rgba(4, 6, 10, .66);

  --mp-shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
  --mp-shadow-2: 0 1px 2px rgba(0, 0, 0, .40), 0 8px 20px rgba(0, 0, 0, .40);
  --mp-shadow-3: 0 2px 6px rgba(0, 0, 0, .45), 0 24px 56px rgba(0, 0, 0, .60);
}