/* ============================================================
   SB Financial — design tokens
   Único lugar donde se cambian colores, tipografías y medidas.
   ============================================================ */

:root {
  /* Marca. Navy es el único color de marca: no hay verde ni acentos. */
  --sb-navy:            #141C2F;
  --sb-navy-deep:       #0E1526;

  /* Superficies */
  --sb-bg:              #F5F6F8;
  --sb-bg-alt:          #E9EBF0;
  --sb-surface:         #FFFFFF;
  --sb-surface-figure:  #EDEFF4;  /* fondo de las ilustraciones de activos */

  /* Texto sobre claro */
  --sb-ink:             #141C2F;
  --sb-ink-body:        #3F4A66;
  --sb-ink-muted:       #6E7796;
  --sb-ink-mono:        #8A93AA;  /* etiquetas en caps */
  --sb-ink-eyebrow:     #5A678A;

  /* Texto sobre navy */
  --sb-on-navy:              #FFFFFF;
  --sb-on-navy-body:         rgba(255, 255, 255, .72);
  --sb-on-navy-muted:        rgba(255, 255, 255, .55);
  --sb-on-navy-mono:         rgba(255, 255, 255, .5);
  --sb-on-navy-nav:          rgba(255, 255, 255, .85);
  --sb-on-navy-nav-quiet:    rgba(255, 255, 255, .5);
  --sb-on-navy-menu:         rgba(255, 255, 255, .88);

  /* Bordes */
  --sb-border:            rgba(20, 28, 47, .10);
  --sb-border-soft:       rgba(20, 28, 47, .06);
  --sb-border-strong:     rgba(20, 28, 47, .18);
  --sb-border-on-navy:    rgba(255, 255, 255, .13);
  --sb-border-on-navy-2:  rgba(255, 255, 255, .24);

  /* Enlaces */
  --sb-link:        #1C2D53;
  --sb-link-hover:  #5A678A;

  /* Tipografía */
  --sb-font-display: 'Space Grotesk', system-ui, sans-serif;
  --sb-font-body:    'Archivo', system-ui, sans-serif;
  --sb-font-mono:    'Roboto Mono', ui-monospace, monospace;

  /* Radios */
  --sb-radius-card:  14px;
  --sb-radius-panel: 16px;
  --sb-radius-input: 10px;
  --sb-radius-pill:  999px;

  /* Sombras */
  --sb-shadow-card:  0 18px 40px rgba(20, 28, 47, .18);
  --sb-shadow-float: 0 10px 30px rgba(20, 28, 47, .32);

  /* Layout */
  --sb-container:      1300px;
  --sb-gutter:         40px;
  --sb-gutter-mobile:  20px;
  --sb-nav-height:     86px;
  --sb-nav-height-m:   64px;
  --sb-logo-height:    52px;
  --sb-logo-height-m:  40px;
  --sb-section-y:      80px;
  --sb-section-y-m:    48px;

  /* Breakpoint de referencia: el móvil/tablet arranca en 1023px hacia abajo.
     Las media queries están escritas a mano porque CSS no acepta var() ahí. */
}