/* ============================================================
   sa-tokens-v2.css - Sistemas San Antonio Design System v2
   Tema: "Stone & Slate" - claro, sobrio, institucional
   ============================================================ */

:root {

  /* SUPERFICIES */
  --bg-base:       #F4F5F7;
  --bg-surface:    #FFFFFF;
  --bg-raised:     #F8F9FA;
  --bg-overlay:    #EDEEF0;
  --bg-hover:      #E4E6EA;

  /* BORDES */
  --border-subtle: #E8E9EC;
  --border-light:  #D8DADE;
  --border-strong: #B8BCC4;

  /* PRIMARIO - Azul pizarra */
  --blue-50:  #F0F4FF;
  --blue-100: #E0E8FF;
  --blue-200: #C0D0F0;
  --blue-400: #6B8CC4;
  --blue-500: #4F72B0;
  --blue-600: #3A5A9A;
  --blue-700: #2E4880;
  --blue-900: #1A2D54;

  --sa-primary:       var(--blue-600);
  --sa-primary-hover: var(--blue-700);
  --sa-primary-light: var(--blue-50);

  /* SAGE - Verde salvia (acento) */
  --sage-100: #E8EFE8;
  --sage-200: #C8DBC8;
  --sage-400: #6E9E6E;
  --sage-500: #558055;
  --sage-600: #3F6440;

  --sa-sage: var(--sage-500);

  /* STONE - Gris calido neutro */
  --stone-100: #F0EDE8;
  --stone-200: #E0DAD0;
  --stone-400: #9C9080;
  --stone-500: #7A6E60;
  --stone-600: #5A5048;

  /* SEMANTICOS */
  --green-100: #E6F4EC;
  --green-400: #4E9E6A;
  --green-500: #3A8054;
  --green-600: #2E6642;
  --sa-success:       var(--green-500);
  --sa-success-light: var(--green-100);

  --red-100: #FAEAEA;
  --red-400: #C46464;
  --red-500: #A84848;
  --red-600: #8C3636;
  --sa-danger:       var(--red-500);
  --sa-danger-light: var(--red-100);

  --yellow-100: #FBF5E0;
  --yellow-400: #C4A040;
  --yellow-500: #A08030;
  --yellow-600: #806020;
  --sa-warning:       var(--yellow-500);
  --sa-warning-light: var(--yellow-100);

  /* TEXTO */
  --text-primary:   #1E2430;
  --text-secondary: #4A5568;
  --text-muted:     #7A8699;
  --text-disabled:  #B0BAC8;
  --text-inverse:   #F8F9FA;

  /* TIPOGRAFIA */
  --font-sans: 'Figtree', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* ESCALA TIPOGRAFICA */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;

  /* ESPACIADO - grilla 4px */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* BORDER RADIUS */
  --r-sm:    4px;
  --r-md:    7px;
  --r-lg:   11px;
  --r-xl:   16px;
  --r-full: 9999px;

  /* SOMBRAS */
  --shadow-xs: 0 1px 2px rgba(30, 36, 48, .06);
  --shadow-sm: 0 1px 4px rgba(30, 36, 48, .08), 0 1px 2px rgba(30, 36, 48, .04);
  --shadow-md: 0 4px 12px rgba(30, 36, 48, .10), 0 2px 4px rgba(30, 36, 48, .06);
  --shadow-lg: 0 8px 24px rgba(30, 36, 48, .12);
  --shadow-xl: 0 20px 48px rgba(30, 36, 48, .16);

  --shadow-focus-blue: 0 0 0 3px rgba(79, 114, 176, .18);
  --shadow-focus-red:  0 0 0 3px rgba(196, 100, 100, .15);

  /* TRANSICIONES */
  --t-fast: 100ms ease;
  --t-base: 160ms ease;
  --t-slow: 250ms ease;

  /* LAYOUT */
  --navbar-height:     68px;
  --content-max-width: 1180px;

}