/* ==========================================================================
   Springhead Design System — Tokens
   Importar este archivo y usar las variables. Nunca escribir hex literales.
   ========================================================================== */

:root {
  /* ---- Core palette ---- */
  --sh-navy: #173A55;
  --sh-navy-deep: #0E2941;
  --sh-teal: #1D5B6E;
  --sh-teal-soft: #3A7A8C;
  --sh-yellow: #EFE61A;
  --sh-yellow-soft: #F5EE6E;
  --sh-yellow-ink: #8A8400;
  --sh-cream: #DDD9C4;
  --sh-paper: #F5F3EB;
  --sh-paper-warm: #EFECDE;
  --sh-off-white: #FAF8F1;
  --sh-white: #FFFFFF;

  /* ---- Ink scale (derived from navy) ---- */
  --sh-ink-900: #0E2941;
  --sh-ink-800: #173A55;
  --sh-ink-700: #2E4F6A;
  --sh-ink-600: #4A6A82;
  --sh-ink-500: #708698;
  --sh-ink-400: #9AAAB8;
  --sh-ink-300: #C4CDD6;
  --sh-ink-200: #DFE5EB;
  --sh-ink-100: #EDF0F3;
  --sh-ink-50:  #F6F7F9;

  /* ---- Semantic ---- */
  --sh-positive: #2E7D5B;
  --sh-negative: #B14B3F;
  --sh-warning:  #C68B2F;
  --sh-muted:    #9AAAB8;

  /* ---- Type families ---- */
  --sh-f-display: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  --sh-f-sans:    'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --sh-f-serif:   'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --sh-f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Spacing rhythm (4px base) ---- */
  --sh-r-1: 4px;   --sh-r-2: 8px;   --sh-r-3: 12px;  --sh-r-4: 16px;
  --sh-r-5: 24px;  --sh-r-6: 32px;  --sh-r-7: 48px;  --sh-r-8: 64px;
  --sh-r-9: 96px;  --sh-r-10: 128px;

  /* ---- Radii ---- */
  --sh-radius-sm: 4px;
  --sh-radius-md: 8px;
  --sh-radius-lg: 14px;
  --sh-radius-pill: 999px;

  /* ---- Borders ---- */
  --sh-border:        1px solid var(--sh-ink-200);
  --sh-border-strong: 1px solid var(--sh-ink-300);
  --sh-border-dotted: 1px dashed var(--sh-ink-300);

  /* ---- Chart-specific ---- */
  --sh-chart-bg:        var(--sh-off-white);
  --sh-chart-grid:      var(--sh-ink-200);
  --sh-chart-axis:      var(--sh-ink-300);
  --sh-chart-tick:      var(--sh-ink-500);
  --sh-chart-c1:        var(--sh-navy);   /* primera serie */
  --sh-chart-c2:        var(--sh-teal);   /* segunda serie */
  --sh-chart-highlight: var(--sh-yellow); /* la serie destacada */
  --sh-chart-c3:        var(--sh-ink-600);
  --sh-chart-c4:        var(--sh-ink-400);
}