/* ============================================================
   ExpertChoice — Design tokens
   Single source of truth for color, type scale, spacing, grid.
   ============================================================ */
:root {
  /* Palette — valores EXACTOS del software OSFinTech (leídos de su tema). */
  --color-bg:        #f7f8fa;  /* --bg */
  --color-surface:   #ffffff;  /* --panel */
  --color-surface-2: #f1f3f7;  /* --panel2 */
  --color-border:    #e2e8f0;  /* --border */
  --color-border-2:  #cbd5e1;
  --color-text:      #0f172a;  /* --text */
  --color-muted:     #475569;  /* --muted */
  --color-accent:    #3e63dd;  /* --brand (azul de marca) */
  --color-accent-2:  #15803d;  /* --green */
  --color-accent-3:  #f97316;  /* naranja del logo */
  --color-danger:    #b91c1c;  /* --red */
  --color-warn:      #c2410c;  /* --orange-l */
  --color-code-bg:   #11161d;  /* paneles oscuros del app (rail) */

  /* Legacy aliases — usados por widgets de demo portados. Se mantienen
     OSCUROS (islas oscuras sobre el tema claro), alineados a los paneles
     oscuros del app. */
  --black:    #11161d;
  --surface:  #161c25;
  --surface2: #1f2733;
  --border:   rgba(255, 255, 255, 0.10);
  --border2:  rgba(255, 255, 255, 0.18);
  --white:    #f0f4f8;
  --muted:    rgba(240, 244, 248, 0.65);
  --accent:   var(--color-accent);
  --accent2:  var(--color-accent-2);
  --accent3:  var(--color-accent-3);

  /* Typography */
  --font-heading: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  --text-h1:      56px;
  --text-h2:      40px;
  --text-h3:      24px;
  --text-h4:      18px;
  --text-body:    16px;
  --text-small:   13px;
  --text-eyebrow: 11px;

  /* Spacing scale — no arbitrary values outside this scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* Section rhythm */
  --section-gap:     var(--space-7);
  --section-pad:     var(--space-6);

  /* Grid */
  --container-max: 1200px;
  --gutter:        24px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}

@media (max-width: 768px) {
  :root {
    --text-h1:   34px;
    --text-h2:   28px;
    --text-h3:   20px;
    --text-h4:   16px;
    --text-body: 15px;
    --section-gap: var(--space-6);
    --section-pad: var(--space-5);
  }
}