/* ==========================================================================
   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-positive-soft: #5CC98C;   /* lighter green for dark-mode text on dark surfaces */
  --sh-negative: #B14B3F;
  --sh-negative-soft: #E07070;   /* lighter red for dark-mode text on dark surfaces */
  --sh-warning:  #C68B2F;
  --sh-muted:    #9AAAB8;

  /* ---- Navy surfaces (dark-mode bg layers) ---- */
  --sh-navy-surface:   #0F2C44;  /* primary surface lift over --sh-navy-deep */
  --sh-navy-surface-2: #133552;  /* secondary surface (cards on cards) */
  --sh-navy-sidebar:   #061A2A;  /* sidebar fond, deepest */

  /* ---- Yellow accents (alt forms) ---- */
  --sh-yellow-border: #C4B800;   /* darker yellow used as 1px border on light surfaces */

  /* ---- Input/form soft backgrounds (light theme) ---- */
  --sh-negative-bg-soft: #FEF9F9; /* very pale red wash for input-error in light mode */

  /* ---- 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;

  /* ---- Focus ring ---- */
  --sh-teal-glow: 0 0 0 3px rgba(27, 113, 129, 0.12);

  /* ---- Status soft washes (badge/pill backgrounds over light surfaces) ---- */
  --sh-positive-bg:  rgba(46, 125, 91, 0.12);
  --sh-warning-bg:   rgba(198, 139, 47, 0.14);
  --sh-negative-bg:  rgba(177, 75, 63, 0.12);
  --sh-teal-bg:      rgba(29, 91, 110, 0.12);
  --sh-teal-bg-soft: rgba(29, 91, 110, 0.04);

  /* ---- Elevation / hairlines ---- */
  --sh-shadow-sm:  0 4px 12px rgba(14, 41, 65, 0.08);
  --sh-shadow-pop: 0 4px 12px rgba(14, 41, 65, 0.15);
  --sh-hairline:   rgba(14, 41, 65, 0.10);

  /* ---- 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);
}