/* CLAW & WAG — Design tokens (variables de marca)
 *
 * Sistema visual dual:
 *   --ft-system → tipografía nativa profesional (panel interno).
 *                 En Mac/iOS = SF Pro, en Windows = Segoe UI, en Linux = system fallback.
 *   --ft-brand  → Gully editorial (formulario público, comprobantes, marca).
 *
 * Los colores son los mismos en ambos contextos (la marca vive en el color, no en la fuente).
 */

/* Inter Variable — fuente principal del sistema (panel interno).
 * Un solo archivo cubre todos los pesos (100-900). Look idéntico en cualquier dispositivo.
 * Usada por Linear, Vercel, Notion, Stripe Dashboard.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/InterVariable.woff2') format('woff2-variations'),
       url('/static/fonts/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/InterVariable-Italic.woff2') format('woff2-variations'),
       url('/static/fonts/InterVariable-Italic.woff2') format('woff2');
}

/* Gully — tipografía editorial de marca (formulario público, comprobantes, PDFs). */
@font-face {
  font-family: 'Gully';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/fonts/Gully-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'Gully';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/Gully-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Gully';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/Gully-Bold.woff2') format('woff2');
}

:root {
  /* ─── Marca (color) ───────────────────────────────────────────── */
  --brand:        #AF9ACA;
  --brand-soft:   #D7B7F4;
  --brand-ink:    #6B5689;
  --brand-tint:   #F5EFFB;   /* lila ultra-suave para fondos */

  --bg:           #F8F8F8;
  --surface:      #FFFFFF;

  /* ─── Texto ───────────────────────────────────────────────────── */
  --ink:          #424242;
  --ink-strong:   #1F1F1F;
  --ink-muted:    #757575;
  --ink-subtle:   #BDBDBD;
  --line:         #ECECEC;
  --line-strong:  #DCDCDC;

  /* ─── Estados ─────────────────────────────────────────────────── */
  --success:      #2E7D32;
  --success-soft: #E8F5E9;
  --warning:      #ED6C02;
  --warning-soft: #FFF4E5;
  --danger:       #C62828;
  --danger-soft:  #FFEBEE;
  --info:         #0288D1;
  --info-soft:    #E1F5FE;

  /* ─── Tipografías ─────────────────────────────────────────────── */
  --ft-system:    'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
                  'Segoe UI', Roboto, Helvetica, Arial,
                  'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  --ft-brand:     'Gully', var(--ft-system);
  --ft-mono:      'SF Mono', Menlo, Monaco, Consolas, 'Courier New', monospace;

  /* Pesos */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Tamaños tipográficos (panel — densidad pro) */
  --fs-xs:        12px;
  --fs-sm:        13px;
  --fs-base:      14px;
  --fs-md:        16px;
  --fs-lg:        18px;
  --fs-xl:        22px;
  --fs-2xl:       28px;
  --fs-3xl:       40px;

  /* Tracking */
  --ls-tight:     -0.011em;
  --ls-normal:    0;
  --ls-label:     0.06em;     /* small uppercase labels (stat card titles, sections) */

  /* ─── Espaciado ───────────────────────────────────────────────── */
  --sp-1:         4px;
  --sp-2:         8px;
  --sp-3:         12px;
  --sp-4:         16px;
  --sp-5:         24px;
  --sp-6:         32px;
  --sp-7:         48px;
  --sp-8:         64px;

  /* ─── Radios ──────────────────────────────────────────────────── */
  --r-sm:         6px;
  --r-md:         8px;
  --r-lg:         12px;
  --r-xl:         16px;
  --r-pill:       999px;

  /* ─── Sombras (sutiles, Apple-style) ──────────────────────────── */
  --sh-xs:        0 1px 2px rgba(15, 15, 15, 0.04);
  --sh-sm:        0 1px 3px rgba(15, 15, 15, 0.06), 0 1px 2px rgba(15, 15, 15, 0.04);
  --sh-md:        0 4px 12px rgba(15, 15, 15, 0.06), 0 2px 4px rgba(15, 15, 15, 0.04);
  --sh-lg:        0 12px 32px rgba(15, 15, 15, 0.08), 0 4px 8px rgba(15, 15, 15, 0.04);
  --sh-focus:     0 0 0 3px rgba(175, 154, 202, 0.18);

  /* Sombra unificada para cards interactivas en hover */
  --sh-card-hover: 0 6px 16px rgba(15, 15, 15, 0.07), 0 2px 6px rgba(15, 15, 15, 0.04);

  /* ─── Layout ──────────────────────────────────────────────────── */
  --sidebar-w:    248px;
  --header-h:     60px;
  --content-max:  1200px;
}