/* ============================================================
   Whiteblock Design System — Layer 1: PRIMITIVES
   Raw values. Solo se editan al cambiar la marca.
   No usar directamente en componentes — ir vía Layer 2 (semantic).
   ============================================================ */

:root {
  /* ── Brand ── */
  --wb-blue-500: #1700FF;   /* accent oficial */
  --wb-blue-600: #1300CC;   /* accent hover */

  /* ── Neutrals (single ramp para light + dark) ── */
  --wb-gray-50:  #f8fafc;
  --wb-gray-100: #ebebeb;   /* light bg */
  --wb-gray-200: #e5e7eb;   /* light border */
  --wb-gray-300: #cbd5e1;
  --wb-gray-400: #94a3b8;
  --wb-gray-500: #6b7280;   /* muted */
  --wb-gray-600: #475569;
  --wb-gray-700: #2a2a2a;   /* dark border */
  --wb-gray-800: #1a1a1a;   /* dark surface2 */
  --wb-gray-900: #111111;   /* dark surface */
  --wb-black:    #0a0a0a;   /* dark bg */
  --wb-white:    #ffffff;

  /* ── Status ── */
  --wb-green-400:  #22c55e;
  --wb-green-500:  #10b981;
  --wb-red-400:    #ef4444;
  --wb-red-500:    #dc2626;
  --wb-yellow-500: #eab308;

  /* ── Spacing scale (4pt) ── */
  --wb-space-1: 4px;
  --wb-space-2: 8px;
  --wb-space-3: 12px;
  --wb-space-4: 16px;
  --wb-space-5: 20px;
  --wb-space-6: 24px;
  --wb-space-7: 32px;
  --wb-space-8: 40px;
  --wb-space-9: 48px;

  /* ── Radius scale ── */
  --wb-radius-sm:   4px;
  --wb-radius-md:   6px;
  --wb-radius-lg:   8px;
  --wb-radius-xl:   12px;
  --wb-radius-2xl:  16px;
  --wb-radius-pill: 999px;

  /* ── Type scale (modular) ── */
  --wb-text-xs:   11px;
  --wb-text-sm:   12px;
  --wb-text-base: 13px;
  --wb-text-md:   14px;
  --wb-text-lg:   16px;
  --wb-text-xl:   20px;
  --wb-text-2xl:  24px;
  --wb-text-3xl:  32px;
  --wb-text-4xl:  40px;
  --wb-text-5xl:  56px;

  /* ── Font weight ── */
  --wb-weight-regular:    400;
  --wb-weight-medium:     500;
  --wb-weight-semibold:   600;
  --wb-weight-bold:       700;
  --wb-weight-extrabold:  800;

  /* ── Line height ── */
  --wb-leading-tight:   1.2;
  --wb-leading-normal:  1.5;
  --wb-leading-relaxed: 1.7;

  /* ── Shadow scale (tinted with brand-blue hue para consistencia con --wb-blue-500) ── */
  --wb-shadow-sm: 0 1px 2px rgba(8, 4, 32, .25);
  --wb-shadow-md: 0 4px 12px rgba(8, 4, 32, .35);
  --wb-shadow-lg: 0 12px 40px rgba(12, 6, 48, .55);

  /* ── Layout ── */
  --wb-shell-h:    52px;
  --wb-sidebar-w:  220px;

  /* ── Transitions ── */
  --wb-transition-fast: .12s ease;
  --wb-transition:      .15s ease;
  --wb-transition-slow: .25s ease;
}