/* ============================================================
   AUF - Design Tokens LAYOUT (valores por defecto)
   ------------------------------------------------------------
   Estos SÍ pueden ser sobreescritos por cada proyecto según sus
   necesidades de tamaño/densidad. Cargar este archivo DESPUÉS de
   tokens-core.css y, si hace falta, un tokens-override.css propio
   del proyecto DESPUÉS de este.
   ============================================================ */

:root {
  /* --- Espaciados --- */
  --spacing-unit:         8px;
  --spacing-xs:           calc(var(--spacing-unit) * 0.5);   /* 4px */
  --spacing-sm:           var(--spacing-unit);                /* 8px */
  --spacing-md:           calc(var(--spacing-unit) * 2);      /* 16px */
  --spacing-lg:           calc(var(--spacing-unit) * 3);      /* 24px */
  --spacing-xl:           calc(var(--spacing-unit) * 4);      /* 32px */

  /* --- Tipografía: escala --- */
  --font-size-base:       16px;
  --font-size-sm:         14px;
  --font-size-xs:         12px;   /* v0.2.0: etiquetas, cabeceras de tabla, badges */
  --font-size-lg:         20px;
  --font-size-xl:         28px;
  --line-height-base:     1.5;

  /* --- Tipografía display: personalidad por producto (v0.2.0) ---
     Excepción documentada a "la tipografía no se toca": el CUERPO es
     siempre Open Sans (--font-family-base, en core), pero cada producto
     puede darle carácter propio a títulos, botones y cabeceras de tabla.
     Por defecto no cambia nada: display = Open Sans, sin mayúsculas,
     y los titulares en Light como pide el manual.
     Ejemplo real: Dossier usa Oswald en mayúsculas (ver design-tokens.md).
     Límite: SOLO estas cinco variables. Colores, cuerpo de texto y
     radios de controles no entran en la personalidad por producto. */
  --font-family-display:      var(--font-family-base);
  --font-display-weight:      var(--font-weight-bold);   /* botones, th, etiquetas */
  --font-titulo-weight:       var(--font-weight-light);  /* h1/h2: Light según manual */
  --font-display-transform:   none;
  --font-display-tracking:    normal;

  /* --- Componentes: tamaños --- */
  --card-min-width:       280px;
  --button-height:        40px;
  --button-height-sm:     32px;   /* v0.2.0 */
  --button-padding-x:     var(--spacing-md);
  --input-height:         40px;
  --topbar-height:        64px;
  --sidebar-width:        240px;

  /* --- Tablas (v0.2.0) ---
     Separado del resto porque la densidad de una tabla y la de un
     formulario no van juntas: una app de escritorio con cientos de
     filas quiere celdas apretadas aunque sus inputs sigan cómodos. */
  --table-font-size:      var(--font-size-sm);
  --table-cell-py:        var(--spacing-sm);
  --table-cell-px:        var(--spacing-md);

  /* --- Sombras --- */
  --shadow-card:          0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-elevated:       0 4px 12px rgba(0, 0, 0, 0.15);

  /* --- Breakpoints (como referencia documental; usar en media queries) --- */
  --breakpoint-mobile:    480px;
  --breakpoint-tablet:    768px;
  --breakpoint-desktop:   1024px;
}