:root {
  /* Colores principales */
  --brand-blue: #03226f;
  --brand-gold: #d8a627;
  --brand-white: #faf6f2;

  /* Colores secundarios derivados de los principales */
  --blue-deep: color-mix(in srgb, var(--brand-blue) 72%, black);
  --blue-ink: color-mix(in srgb, var(--brand-blue) 48%, black);
  --blue-bright: color-mix(in srgb, var(--brand-blue) 88%, var(--brand-white));
  --blue-mist: color-mix(in srgb, var(--brand-blue) 8%, var(--brand-white));
  --gold-on-blue: color-mix(in srgb, var(--brand-gold) 86%, var(--brand-white));
  --gold-light: color-mix(in srgb, var(--gold-on-blue) 76%, var(--brand-white));
  --cream: color-mix(in srgb, var(--brand-gold) 5%, var(--brand-white));

  /* Colores complementarios: superficies reducidas */
  --surface-card: color-mix(in srgb, var(--brand-blue) 3%, var(--brand-white));
  --surface-section: color-mix(in srgb, var(--brand-blue) 6%, var(--brand-white));
  --surface-warm: color-mix(in srgb, var(--brand-gold) 8%, var(--brand-white));
  --surface-payments: color-mix(in srgb, var(--brand-gold) 14%, var(--brand-white));
  --surface-media: color-mix(in srgb, var(--brand-blue) 12%, var(--brand-white));

  /* Colores complementarios: dos niveles de texto */
  --text-secondary: color-mix(in srgb, var(--blue-ink) 72%, var(--brand-white));
  --text-muted: color-mix(in srgb, var(--blue-ink) 62%, var(--brand-white));

  /* Texto y líneas sobre fondos oscuros */
  --on-dark-strong: color-mix(in srgb, var(--brand-white) 82%, transparent);
  --on-dark: color-mix(in srgb, var(--brand-white) 70%, transparent);
  --on-dark-muted: color-mix(in srgb, var(--brand-white) 58%, transparent);
  --on-dark-faint: color-mix(in srgb, var(--brand-white) 42%, transparent);

  /* Bordes, estados y sombras */
  --border-subtle: color-mix(in srgb, var(--brand-blue) 9%, transparent);
  --border-default: color-mix(in srgb, var(--brand-blue) 14%, transparent);
  --border-strong: color-mix(in srgb, var(--brand-blue) 30%, transparent);
  --surface-hover: color-mix(in srgb, var(--brand-blue) 6%, transparent);
  --shadow-soft: color-mix(in srgb, var(--blue-deep) 6%, transparent);
  --shadow-medium: color-mix(in srgb, var(--blue-deep) 12%, transparent);
  --shadow-strong: color-mix(in srgb, var(--blue-deep) 19%, transparent);

  /* Colores funcionales y de terceros */
  --modo-green: #4dbdad;
  --gold-dark: color-mix(in srgb, var(--gold-on-blue) 56%, black);

  /* Alias semánticos utilizados por la landing */
  --background: var(--cream);
  --foreground: var(--blue-ink);
  --card: var(--brand-white);
  --card-foreground: var(--blue-ink);
  --primary: var(--brand-blue);
  --primary-foreground: var(--brand-white);
  --secondary: var(--surface-warm);
  --secondary-foreground: var(--blue-ink);
  --muted: var(--surface-warm);
  --muted-foreground: var(--text-muted);
  --border: var(--border-default);
  --ring: var(--gold-on-blue);
  --blue: var(--brand-blue);
  --gold: var(--gold-on-blue);
  --white: var(--brand-white);
  --ink: var(--blue-ink);
  --line: var(--border-default);
}