/* ARGENTUM · Color tokens
   Palette born from the metallic logo (graphite + silver) plus two functional accents.
   Rule 70/20/10 — 70% steel/graphite/bone base · 20% graphite/ink contrast · 10% accent.
   Blue = action (clickable only). Green = positive / live-price states only. */
:root {
  /* ---- Brand raw values (from the brand document) ---- */
  --argentum-ink: #14181C;        /* Grafito / Tinta */
  --argentum-steel: #434F5B;      /* Acero oscuro */
  --argentum-silver: #808A96;     /* Plateado medio (dominant logo tone) */
  --argentum-silver-light: #C2CAD3;/* Plateado claro */
  --argentum-bone: #F4F5F6;       /* Blanco hueso */
  --argentum-blue: #2F6FED;       /* Azul acción */
  --argentum-green: #1FAA59;      /* Verde confirmación */

  /* ---- Neutral steel scale (graphite → bone), harmonised around brand stops ---- */
  --steel-950: #0E1115;
  --steel-900: #14181C;  /* = ink */
  --steel-800: #1F262C;
  --steel-700: #434F5B;  /* = acero oscuro */
  --steel-600: #5C6773;
  --steel-500: #808A96;  /* = plateado medio */
  --steel-400: #9BA4AE;
  --steel-300: #C2CAD3;  /* = plateado claro */
  --steel-200: #DCE0E5;
  --steel-100: #E9ECEF;
  --steel-50:  #F4F5F6;  /* = bone */
  --steel-0:   #FFFFFF;

  /* ---- Action blue scale ---- */
  --blue-700: #1B4FB8;
  --blue-600: #2459D6;
  --blue-500: #2F6FED;   /* = azul acción */
  --blue-400: #5C8DF1;
  --blue-100: #DDE8FD;
  --blue-50:  #EEF4FE;

  /* ---- Confirmation green scale ---- */
  --green-700: #137A3E;
  --green-600: #178C49;
  --green-500: #1FAA59;  /* = verde confirmación */
  --green-400: #4CC07E;
  --green-100: #D7F2E2;
  --green-50:  #EAF8F0;

  /* ---- Alert (error only — not a focus of the brand) ---- */
  --danger-600: #C9402B;
  --danger-500: #DE4A33;
  --danger-100: #FBE2DD;

  /* ---- Amber (rare warnings / stale price) ---- */
  --amber-500: #D9912B;
  --amber-100: #F8EBD3;

  /* =================== SEMANTIC ALIASES =================== */
  /* Surfaces — light (default product) */
  --bg-page: var(--steel-50);
  --surface-card: var(--steel-0);
  --surface-sunken: var(--steel-50);
  --surface-raised: var(--steel-0);
  --surface-hover: var(--steel-100);
  --surface-inverse: var(--steel-900);

  /* Surfaces — dark (marketing / social) */
  --bg-page-dark: var(--steel-900);
  --surface-card-dark: var(--steel-800);

  /* Text */
  --text-primary: var(--steel-900);
  --text-secondary: var(--steel-600);
  --text-muted: var(--steel-500);
  --text-on-dark: var(--steel-50);
  --text-on-dark-muted: var(--steel-300);
  --text-link: var(--blue-500);
  --text-on-accent: #FFFFFF;

  /* Borders & lines */
  --border-subtle: var(--steel-200);
  --border-default: var(--steel-300);
  --border-strong: var(--steel-400);
  --border-on-dark: rgba(255,255,255,0.12);
  --focus-ring: var(--blue-500);

  /* Action */
  --accent: var(--blue-500);
  --accent-hover: var(--blue-600);
  --accent-active: var(--blue-700);
  --accent-soft: var(--blue-50);

  /* Positive / live data */
  --success: var(--green-500);
  --success-hover: var(--green-600);
  --success-soft: var(--green-50);

  /* Status */
  --danger: var(--danger-500);
  --danger-soft: var(--danger-100);
  --warning: var(--amber-500);
  --warning-soft: var(--amber-100);
}