/* ============================================================
   sa-tokens-v5.css — Sistemas San Antonio Design System v5
   Tema: "Stone Contrast" — claro de alto contraste
   Vendoreado en LoginAPI (Razor). Usar como var(--nombre) en site.css.
   ============================================================ */

:root {

  /* SUPERFICIES — gris frío + blanco */
  --bg-base:       #E6E9EF;
  --bg-surface:    #FFFFFF;
  --bg-raised:     #F4F6F9;
  --bg-overlay:    #DCE0E7;
  --bg-hover:      #CFD5DE;

  /* BORDES */
  --border-subtle: #D5D9E0;
  --border-light:  #BEC4CF;
  --border-strong: #98A0AE;

  /* PRIMARIO — Azul profundo */
  --blue-50:  #EAF1FB;
  --blue-100: #D2E0F5;
  --blue-200: #A9C5EC;
  --blue-400: #4E7BC4;
  --blue-500: #2F60AE;
  --blue-600: #1F4E96;
  --blue-700: #173D78;
  --blue-900: #0E2A57;

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

  /* SAGE */
  --sage-100: #E0EBE0;
  --sage-200: #BCD3BC;
  --sage-400: #5C8F5C;
  --sage-500: #426E42;
  --sage-600: #2F5230;
  --sa-sage: var(--sage-500);

  /* STONE */
  --stone-100: #ECE8E1;
  --stone-200: #D8D1C5;
  --stone-400: #948876;
  --stone-500: #6E6354;
  --stone-600: #4E4539;

  /* SEMÁNTICOS */
  --green-100: #DCF0E4;
  --green-400: #2E9E5E;
  --green-500: #1F7D45;
  --green-600: #166236;
  --sa-success:       var(--green-500);
  --sa-success-light: var(--green-100);

  --red-100: #FBE3E3;
  --red-400: #D14545;
  --red-500: #B22828;
  --red-600: #8E1E1E;
  --sa-danger:       var(--red-500);
  --sa-danger-light: var(--red-100);

  --yellow-100: #FBEFCC;
  --yellow-400: #C68A12;
  --yellow-500: #9E6E0C;
  --yellow-600: #7C5608;
  --sa-warning:       var(--yellow-500);
  --sa-warning-light: var(--yellow-100);

  /* TEXTO — alto contraste */
  --text-primary:   #131722;
  --text-secondary: #38414F;
  --text-muted:     #626D7E;
  --text-disabled:  #A2ABBA;
  --text-inverse:   #FFFFFF;

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

  --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 (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;

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

  /* SOMBRAS */
  --shadow-xs: 0 1px 2px rgba(20, 26, 38, .10);
  --shadow-sm: 0 1px 4px rgba(20, 26, 38, .12), 0 1px 2px rgba(20, 26, 38, .08);
  --shadow-md: 0 4px 14px rgba(20, 26, 38, .16), 0 2px 5px rgba(20, 26, 38, .10);
  --shadow-lg: 0 10px 28px rgba(20, 26, 38, .20);
  --shadow-focus-blue: 0 0 0 3px rgba(31, 78, 150, .25);
  --shadow-focus-red:  0 0 0 3px rgba(178, 40, 40, .22);

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

  /* LAYOUT */
  --sidebar-width:  220px;
  --navbar-height:   60px;
  --content-max-width: 1200px;
}