/*
 * ComprasGuate Theme Native — Design Tokens
 * Brand Bible — LOCKED palette
 */

:root {
  /* ─── Primary ─── */
  --cg-primary:        #1D73BE;
  --cg-primary-dark:   #155A95;
  --cg-primary-light:  #E8F2FB;
  --cg-primary-50:     #F4F9FD;

  /* ─── Dark anchors ─── */
  --cg-dark:           #18181B;
  --cg-dark-soft:      #27272A;

  /* ─── Semantic (teal = success) ─── */
  --cg-success:        #0F766E;
  --cg-success-light:  #ECFDF5;
  --cg-warning:        #F59E0B;
  --cg-danger:         #DC2626;
  --cg-info:           #1D73BE;

  /* ─── Accents ─── */
  --cg-accent-warm:    #F59E0B;
  --cg-accent-coral:   #FB7185;
  --cg-blanco:         #FFFFFF;

  /* ─── Neutrals ─── */
  --cg-gray-900:       #111827;
  --cg-gray-700:       #374151;
  --cg-gray-500:       #6B7280;
  --cg-gray-300:       #D1D5DB;
  --cg-gray-100:       #F3F4F6;
  --cg-gray-50:        #F9FAFB;

  /* ─── Container width (LOCKED 1820px) ─── */
  --cg-container-max:  1820px;
  --cg-container-pad:  32px;

  /* ─── Spacing scale ─── */
  --cg-space-1:  4px;
  --cg-space-2:  8px;
  --cg-space-3:  12px;
  --cg-space-4:  16px;
  --cg-space-5:  20px;
  --cg-space-6:  24px;
  --cg-space-8:  32px;
  --cg-space-10: 40px;
  --cg-space-12: 48px;
  --cg-space-16: 64px;
  --cg-space-20: 80px;

  /* ─── Border radius ─── */
  --cg-radius-sm:   6px;
  --cg-radius:      10px;
  --cg-radius-lg:   16px;
  --cg-radius-xl:   24px;
  --cg-radius-full: 999px;

  /* ─── Shadows ─── */
  --cg-shadow-sm: 0 1px 2px rgba(20,30,60,.04);
  --cg-shadow:    0 4px 12px rgba(20,30,60,.06);
  --cg-shadow-lg: 0 16px 40px rgba(20,30,60,.10);

  /* ─── Typography ─── */
  --cg-font-body:    'Inter', -apple-system, "Helvetica Neue", sans-serif;
  --cg-font-display: 'Inter Tight', 'Inter', sans-serif;
  --cg-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ─── Text scale (desktop) ─── */
  --cg-text-xs:   12px;
  --cg-text-sm:   14px;
  --cg-text-base: 16px;
  --cg-text-lg:   18px;
  --cg-text-xl:   22px;
  --cg-text-2xl:  28px;
  --cg-text-3xl:  36px;
  --cg-text-4xl:  44px;
}

@media (max-width: 768px) {
  :root {
    --cg-container-pad: 16px;
    --cg-text-xs:   11px;
    --cg-text-sm:   13px;
    --cg-text-base: 15px;
    --cg-text-lg:   17px;
    --cg-text-xl:   20px;
    --cg-text-2xl:  24px;
    --cg-text-3xl:  28px;
    --cg-text-4xl:  32px;
  }
}