:root {
  /* ── Brand / primary ───────────────────────────── */
  --color-primary: #DA291C;        /* Claro red */
  --color-primary-hover: #B01E13;  /* darker red — hover/press */
  --color-primary-tint: #FEECEB;   /* light red wash — icon chips, selected rows */

  /* ── Neutrals ──────────────────────────────────── */
  --color-dark: #1A1A1A;           /* nav bar, dark sections, primary text */
  --color-surface: #FFFFFF;        /* base white surface */
  --color-surface-muted: #F5F5F5;  /* section / page background gray */

  /* ── Text scale (derived) ──────────────────────── */
  --color-text: #1A1A1A;           /* default body text */
  --color-text-secondary: #5C5C5C; /* secondary / supporting text */
  --color-text-muted: #8A8A8A;     /* captions, placeholders */
  --color-text-inverse: #FFFFFF;   /* text on dark / red */

  /* ── Borders & lines ───────────────────────────── */
  --color-border: #E0E0E0;         /* default hairline */
  --color-border-strong: #C7C7C7;  /* input borders, dividers */

  /* ── Semantic states ───────────────────────────── */
  --color-success: #1E8E3E;
  --color-warning: #E6A700;
  --color-error: #DA291C;
  --color-info: #1A73E8;

  /* ── Semantic aliases ──────────────────────────── */
  --surface-page: var(--color-surface-muted);
  --surface-card: var(--color-surface);
  --surface-nav: var(--color-dark);
  --text-body: var(--color-text);
  --text-heading: var(--color-dark);
  --accent: var(--color-primary);
  --accent-hover: var(--color-primary-hover);
  --accent-tint: var(--color-primary-tint);
}