/* ============================================================
   DESIGN SYSTEM TOKENS — Stripe-Inspired
   Sobreescritura de variables Bootstrap 5 + tokens propios
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     FUENTES
     ---------------------------------------------------------- */
  --ds-font-primary: 'sohne-var', 'Inter', 'Plus Jakarta Sans',
                     'SF Pro Display', -apple-system, sans-serif;
  --ds-font-mono:    'Source Code Pro', 'SFMono-Regular', 'Consolas',
                     'Liberation Mono', monospace;

  /* OpenType features — aplicar siempre en texto con --ds-font-primary */
  --ds-font-features-display: "ss01";   /* Glyphs geométricos alternativos */
  --ds-font-features-numeric: "tnum";  /* Numerales tabulares para datos */

  /* ----------------------------------------------------------
     COLORES PRIMARIOS — Sobreescritura Bootstrap
     ---------------------------------------------------------- */
  --bs-primary:        #533afd;
  --bs-primary-rgb:    83, 58, 253;
  --bs-body-color:     #64748d;
  --bs-body-bg:        #ffffff;
  --bs-border-color:   #e5edf5;
  --bs-border-radius:  4px;

  /* ----------------------------------------------------------
     PALETA DEL SISTEMA DE DISEÑO
     ---------------------------------------------------------- */

  /* Marca principal */
  --ds-purple:          #533afd;
  --ds-purple-hover:    #4434d4;
  --ds-purple-deep:     #2e2b8c;
  --ds-purple-light:    #b9b9f9;
  --ds-purple-mid:      #665efd;
  --ds-purple-subtle:   rgba(83, 58, 253, 0.05);

  /* Textos */
  --ds-heading:         #061b31;   /* Deep Navy — NUNCA usar #000000 */
  --ds-label:           #273951;   /* Dark Slate — labels de formulario */
  --ds-body:            #64748d;   /* Slate — texto secundario */
  --ds-white:           #ffffff;

  /* Marca oscura */
  --ds-brand-dark:      #1c1e54;   /* Indigo profundo — secciones oscuras */
  --ds-dark-navy:       #0d253d;   /* Casi-negro con azul — máxima profundidad */

  /* Accentos decorativos (NO usar en botones/links) */
  --ds-ruby:            #ea2261;
  --ds-magenta:         #f96bee;
  --ds-magenta-light:   #ffd7ef;
  --ds-lemon:           #9b6829;   /* Warning */

  /* Superficie & Bordes */
  --ds-border:          #e5edf5;
  --ds-border-purple:   #b9b9f9;
  --ds-border-soft-purple: #d6d9fc;
  --ds-border-magenta:  #ffd7ef;
  --ds-border-dashed:   #362baa;

  /* Estado de éxito */
  --ds-success:         #15be53;
  --ds-success-text:    #108c3d;
  --ds-success-bg:      rgba(21, 190, 83, 0.2);
  --ds-success-border:  rgba(21, 190, 83, 0.4);

  /* Sombras — Sistema cromático con tinte azul */
  --ds-shadow-blue:         rgba(50, 50, 93, 0.25);
  --ds-shadow-dark-blue:    rgba(3, 3, 39, 0.25);
  --ds-shadow-black:        rgba(0, 0, 0, 0.1);
  --ds-shadow-ambient:      rgba(23, 23, 23, 0.08);
  --ds-shadow-soft:         rgba(23, 23, 23, 0.06);

  /* Sombras prearmadas por nivel */
  --ds-shadow-0: none;
  --ds-shadow-1: rgba(23,23,23,0.06) 0px 3px 6px;
  --ds-shadow-2: rgba(23,23,23,0.08) 0px 15px 35px;
  --ds-shadow-3: rgba(50,50,93,0.25) 0px 30px 45px -30px,
                 rgba(0,0,0,0.1) 0px 18px 36px -18px;
  --ds-shadow-4: rgba(3,3,39,0.25) 0px 14px 21px -14px,
                 rgba(0,0,0,0.1) 0px 8px 17px -8px;
  --ds-shadow-focus: 0 0 0 2px #533afd;   /* Ring de accesibilidad */

  /* Border-radius scale */
  --ds-radius-micro:    1px;
  --ds-radius-sm:       4px;   /* Workhorse: botones, inputs, badges */
  --ds-radius-md:       5px;   /* Contenedores standard */
  --ds-radius-lg:       6px;   /* Nav, elementos interactivos grandes */
  --ds-radius-xl:       8px;   /* Cards featured, hero elements */
  --ds-radius-bottom:   0px 0px 6px 6px; /* Tab panels, dropdown footers */

  /* Espaciado — unidad base 8px */
  --ds-space-1:   1px;
  --ds-space-2:   2px;
  --ds-space-4:   4px;
  --ds-space-6:   6px;
  --ds-space-8:   8px;
  --ds-space-10:  10px;
  --ds-space-12:  12px;
  --ds-space-14:  14px;
  --ds-space-16:  16px;
  --ds-space-20:  20px;
  --ds-space-24:  24px;
  --ds-space-32:  32px;
  --ds-space-40:  40px;
  --ds-space-48:  48px;
  --ds-space-64:  64px;
  --ds-space-96:  96px;

  /* ----------------------------------------------------------
     SOBREESCRITURA VARIABLES BOOTSTRAP 5
     ---------------------------------------------------------- */
  --bs-link-color:          var(--ds-purple);
  --bs-link-hover-color:    var(--ds-purple-hover);
  --bs-border-radius:       var(--ds-radius-sm);
  --bs-border-radius-sm:    var(--ds-radius-sm);
  --bs-border-radius-lg:    var(--ds-radius-xl);
  --bs-border-radius-pill:  var(--ds-radius-sm); /* Bloquear pills */
  --bs-font-sans-serif:     var(--ds-font-primary);
  --bs-font-monospace:      var(--ds-font-mono);
  --bs-heading-color:       var(--ds-heading);
  --bs-success:             #15be53;
  --bs-warning:             #9b6829;
  --bs-box-shadow:          var(--ds-shadow-3);
  --bs-box-shadow-sm:       var(--ds-shadow-1);
  --bs-box-shadow-lg:       var(--ds-shadow-3);
}