:root {
  /* Colores - Arion WebCheck-in (Based on MAUI Design) */
  --color-primary: #0E4594;
  --color-primary-light: #B8D5FF;
  --color-primary-dark: #002C52;
  --color-on-primary: #FFFFFF;
  --color-background: #FFFFFF;
  --color-accent: #FFCE00; /* AMARILLO */
  --color-text-primary: #212121;
  --color-text-secondary: #757575;
  --color-divider: #BDBDBD; /* Gris claro para divisores */
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-focus-ring: rgba(14, 69, 148, 0.35); /* Halo del campo con foco (primary al 35%) */

  /* Roles: en claro coinciden con la paleta; el tema oscuro los separa */
  --color-primary-text: var(--color-primary);
  --color-page-background: var(--color-primary);
  --color-focus-border: var(--color-primary-dark);

  /* Tipografía (Roboto) */
  --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-size-h1: 28px;
  --font-size-h2: 24px;
  --font-size-h3: 20px;
  --font-size-body: 14px;
  --font-size-small: 12px;
  --font-size-xsmall: 10px;
  
  /* Pesos */
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-xxxs: 2px;
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-s: 12px;
  --spacing-m: 16px;
  --spacing-l: 20px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;

  /* Radios */
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-full: 99px;

  /* Sombras */
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-button: 0 2px 4px rgba(14, 69, 148, 0.2);

  /* Feedback semántico */
  --color-success: rgba(40, 167, 69, 0.10);
  --color-success-text: #1a7a34;
  --color-success-border: rgba(40, 167, 69, 0.35);

  --color-warning: rgba(255, 152, 0, 0.10);
  --color-warning-text: #b35e00;
  --color-warning-border: rgba(255, 152, 0, 0.40);

  --color-error: rgba(220, 53, 69, 0.10);
  --color-error-text: #a71d2a;
  --color-error-border: rgba(220, 53, 69, 0.35);
}

/* Paleta oscura: se activa cuando el tema DevExtreme del hotel es oscuro (webcheckin.js) */
:root.uxui-tema-oscuro {
  --color-primary: #2F6BC0;
  --color-primary-light: #24344D;
  --color-primary-dark: #1F4F94;
  --color-background: #1E1E1E;
  --color-text-primary: #DEDEDE;
  --color-text-secondary: #A8A8A8;
  --color-divider: #4A4A4A;

  --color-primary-text: #8AB4F8;
  --color-page-background: #121212;
  --color-focus-border: #8AB4F8;
  --color-focus-ring: rgba(138, 180, 248, 0.4);

  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.4);

  --color-success-text: #7BD88F;
  --color-warning-text: #FFB74D;
  --color-error-text: #FF8A80;
}