:root {
  /* --- Base: verde menta de marca --- */
  --mint-100: #D6FFF1;
  --mint-300: #7CF7D0;
  --mint-400: #4CF0BF;
  --mint-500: #00E3A0; /* color de marca */
  --mint-600: #00C489;
  --mint-700: #009B6C;

  /* --- Base: acero (estructura, datos secundarios) --- */
  --steel-300: #A9BECD;
  --steel-400: #8AA6B8;
  --steel-500: #6E8FA8;
  --steel-600: #55738A;

  /* --- Base: neutros fríos --- */
  --ink-900: #0A0E11;
  --ink-850: #0E1216; /* fondo de la marca */
  --ink-800: #131A20;
  --ink-750: #182028;
  --ink-700: #1F2A33;
  --ink-600: #2C3740;
  --ink-500: #3C4A55;
  --ink-400: #6E7A83;
  --ink-300: #9CA9B1;
  --ink-200: #C6D0D6;
  --ink-100: #E3E9ED;
  --ink-050: #EDF1F4;
  --white: #FFFFFF;

  /* --- Base: señales de estado --- */
  --amber-500: #F2B347;
  --amber-900: #241E12;
  --coral-500: #F2685A;
  --coral-900: #2A1614;
  --azure-500: #5FA8E0;
  --azure-900: #12212B;

  /* --- Semánticos: superficies (tema oscuro, el canónico) --- */
  --surface-page: var(--ink-850);
  --surface-card: var(--ink-800);
  --surface-raised: var(--ink-750);
  --surface-sunken: var(--ink-900);
  --surface-input: var(--ink-800);
  --surface-hover: var(--ink-700);
  --surface-inverse: var(--ink-050);
  --surface-brand: var(--mint-500);

  /* --- Semánticos: texto --- */
  --text-strong: var(--ink-050);
  --text-body: var(--ink-200);
  --text-muted: var(--ink-300);
  --text-subtle: var(--ink-400);
  --text-brand: var(--mint-500);
  --text-on-brand: var(--ink-850);
  --text-on-inverse: var(--ink-850);
  --text-disabled: var(--ink-500);

  /* --- Semánticos: bordes --- */
  --border-subtle: #1D242A;
  --border-default: var(--ink-600);
  --border-strong: var(--ink-500);
  --border-brand: var(--mint-500);
  --border-focus: var(--mint-400);

  /* --- Semánticos: acción --- */
  --action-primary: var(--mint-500);
  --action-primary-hover: var(--mint-400);
  --action-primary-active: var(--mint-600);
  --action-primary-text: var(--ink-850);
  --action-secondary-border: var(--ink-600);
  --action-secondary-hover: var(--ink-700);
  --action-danger: var(--coral-500);

  /* --- Semánticos: estado --- */
  --status-ok-fg: var(--mint-500);
  --status-ok-bg: #0C2A20;
  --status-warn-fg: var(--amber-500);
  --status-warn-bg: var(--amber-900);
  --status-error-fg: var(--coral-500);
  --status-error-bg: var(--coral-900);
  --status-info-fg: var(--azure-500);
  --status-info-bg: var(--azure-900);

  /* --- Semánticos: gráficas --- */
  --chart-1: var(--mint-500);
  --chart-2: var(--steel-500);
  --chart-3: var(--amber-500);
  --chart-4: var(--azure-500);
  --chart-5: var(--coral-500);
}

/* Tema claro. Uso restringido: documentos, propuestas e impresión.
   Todo producto y toda pieza de marca va en oscuro. */
.affix-light {
  --surface-page: var(--white);
  --surface-card: #F7F9FA;
  --surface-raised: var(--white);
  --surface-sunken: var(--ink-050);
  --surface-input: var(--white);
  --surface-hover: var(--ink-050);
  --surface-inverse: var(--ink-850);

  --text-strong: var(--ink-900);
  --text-body: #2A343C;
  --text-subtle: #5B6870;
  --text-muted: #47535B;
  --text-brand: var(--mint-700);
  --text-on-inverse: var(--ink-050);

  --border-subtle: #E3E9ED;
  --border-default: #C6D0D6;
  --border-strong: #A9BECD;

  --action-primary-hover: var(--mint-600);
  --action-secondary-border: #C6D0D6;
  --action-secondary-hover: var(--ink-050);
  --status-ok-bg: var(--mint-100);
  --status-warn-bg: #FDF3E0;
  --status-error-bg: #FDEAE7;
  --status-info-bg: #E8F2FA;
}